SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  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,312
    Mentioned
    178 Post(s)
    Tagged
    8 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
  •