SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to bind focus and blur on new elements

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

    I have the following HTML code:
    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:

    Code:
        $("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:

    Code:
    $('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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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:

    Code:
    <!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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •