jquery append() doesn't preserve data or click handlers

I am trying to append some links with data and a click handler to a containing div.

jQuery 1.4.3

Fails in FireFox 5.0/Chrome 13.0.782, but works in IE9

I first create the element as a jQuery object, then add the data and click handler. Then I use .append() to append it to the container:

var $selector = $('<a href="#" class="x">Test</a>');
$selector.data('testdata', "Test");
$selector.click(function(event) {
   alert('Clicked: ' + $(this).data('testdata'));
   return false;
});

$('#container').append($selector);

I see the link added, but when I click on it, the click handler does not fire.

I thought that maybe I needed to do the append first and then add data+click, but that doesn't work either:

var $selector = $('<a href="#" class="x">Test</a>');
$('#container').append($selector);

$selector.data('testdata', "Test"开发者_运维问答);
$selector.click(function(event) {
   alert('Clicked: ' + $(this).data('testdata'));
   return false;
});

Does append not preserve data and handlers? It seems that when I .append($selector), $selector and the newly added DOM object are not one in the same.

Which browser are you using? Also, which version of JQuery? This works for me in firefox, ie, and chrome on JQuery version 1.6. Here's the test fiddle I was using.

I don't think the append is the cause of your problem. It's because the html you're passing into $() to create your elements is not a simple tag.

According to the documentation of jQuery(html):

If the HTML is more complex than a single tag without attributes, as it is in the above example, the actual creation of the elements is handled by the browser's innerHTML mechanism. In most cases, jQuery creates a new element and sets the innerHTML property of the element to the HTML snippet that was passed in. When the parameter has a single tag, such as $('<img />') or $('<a></a>'), jQuery creates the element using the native JavaScript createElement() function.

This quote is from this page: http://api.jquery.com/jQuery/#jQuery2

This means that you may get a different element than what you intend because it's dependent on the browser's innerHTML property. You may find it easier if you pass in a simple tag '<a></a>' and add other attributes to it as a second argument map to $(html, props).

To get this to work with a simple tag in the $(html, props) call, you would do something like this:

var $selector = $('<a></a>', 
    { 
    "class" : "x",
    "href" : "#",
    text : "Test",
    click: function() {
           alert('Clicked: ' + $(this).data('testdata'));
            return false;
        }
    });

$('#container').append($selector);

$selector.data('testdata', "Test data");

For my page, the problem exists using jQuery 1.4.3 and 1.4.4. But if I upgrade to 1.6.1, the problem goes away and the code works as expected. At this particular point, I am worried about upgrading to 1.6.1.

My other option is to append the element, then requery for it using jquery before adding data and handlers. That code does work, but obviously not ideal.

I ran into the same issue, try using .appendTo() instead of .append().

It worked for me.