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