How to bind focus and blur on new elements

Dev Shed Forums Sponsor:

February 27th, 2013, 05:48 PM

markjohnson

Registered User

Join Date: Nov 2010

Posts: 6

Time spent in forums: 36 m 2 sec
Reputation Power: 0

jQuery - 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

February 27th, 2013, 11:04 PM

web_loone08

Contributing User

Join Date: Aug 2008

Posts: 605

Time spent in forums: 1 Week 1 Day 16 h 34 m 55 sec
Reputation Power: 69

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>

Viewing: Dev Shed Forums > Web Design > JavaScript Development > jQuery - How to bind focus and blur on new elements

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump