how to bind focus and blur to a new element?

how to bind focus and blur to a new element?

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