How to bind focus and blur on new elements

JavaScript
1

Hi, I am having trouble binding focus and blur to new elements.

I have the following HTML code:


    <div class="ticket">
        <input class="firstname" name="firstname[]" title="First Name(s)" value="" />
        <input class="lastname" name="lastname[]" title="Last Name" value="" />
        <a href="#"><img src="/images/admin/DeleteRed.png" /></a> OR
        <a href="#" class="add">Add more</a>
    </div>

I then have the following jquery code attached to ‘Add more’ hyperlink:

    $("body").on("click", "a.add", function() {
        var content = $(this).parent('.ticket').html();
        var newdiv = $("<div class='ticket'>");
        newdiv.html(content);
        $(this).parent('.ticket').after(newdiv);
        return false;
    });

As you can see, all it does is copy the current div and add it straight after.

The input fields within the div tag have the following jquery bound to it:

$('input:text').on({
    focus: function () {
        var self = $(this);

        if (self.val() == self.attr('title')) {
            self.val('');
        };
    },
    blur: function () {
        var self = $(this),
            val = jQuery.trim(self.val());

        if (val == "" || val == self.attr('title')) {
          self.val(self.attr('title'));
        };
    }
}).trigger('blur');

It does seem to copy the div tag and place it right after the current one, however, it does not bind focus or blur to the newly added elements.

What am I doing wrong?

thanks

2

Hi,

you need to bind the click events to a parent element that will be present when the page is first loaded and then pass in the selector as a second argument.
Something like this:

<!DOCTYPE HTML>
<html>
  <head>
    <!--http://www.sitepoint.com/forums/showthread.php?987059-how-to-bind-focus-and-blur-on-new-elements-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>.on() example</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  </head>
  
  <body>
    <div class="ticket">
      <input class="firstname" name="firstname[]" title="First Name(s)" value="First Name(s)" />
      <input class="lastname" name="lastname[]" title="Last Name" value="Last Name" />
      <a href="#"><img src="/images/admin/DeleteRed.png" /></a> OR
      <a href="#" class="add">Add more</a>
    </div>
    
    <script>
      $("body").on("click", "a.add", function() {
        var content = $(this).parent('.ticket').html();
        var newdiv = $("<div class='ticket'>");
        newdiv.html(content);
        $(this).parent('.ticket').after(newdiv);
        return false;
      });
      
      $(document).on({
        focus: function() {
          var self = $(this);
          if (self.val() == self.attr('title')) {
            self.val('');
          }
        },
        blur: function() {
          var self = $(this);
          if (self.val() == "" || val == self.attr('title')) {
            self.val(self.attr('title')); 
          }
        }
      }, "input:text");
    </script>
  </body>
</html>

I’ve also hard-coded the input values to make life easier.