#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2010
    Posts
    6
    Rep Power
    0

    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
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,110
    Rep Power
    119
    Is this what you were trying to do?
    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    
        <div class="ticket">
            <input type="text" class="firstname" name="firstname[]" title="First Name(s)" value="" />
            <input type="text" 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>
    
    <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', 'input[type=text]', function() { 
    
            var self = $(this);
           
            if (self.val() == self.attr('title')) {
                self.val('');
            }
    
    });
    
    $(document).on('blur', 'input[type=text]', function() { 
    
            var self = $(this);
                val = jQuery.trim(self.val());
           
            if (val == "" || val == self.attr('title')) {
              self.val(self.attr('title')); 
            }
    
    });
    
    </script>

IMN logo majestic logo threadwatch logo seochat tools logo