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

Question

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.

@slolife: Even with 1.4.3 this is working for me: jsfiddle.net/pCZUv — Andrew Whitaker
– Andrew Whitaker, Commented Jun 22, 2011 at 17:17
I don't see any js errors, but it is definitely not working in Chrome or FF. It is part of a bigger page and the code above is an abbreviation, but I put this sample code in my page and it doesn't work. I cannot, unfortunately, post the whole page. There must be something else going wrong then. Thanks for your help. — slolife
– slolife, Commented Jun 22, 2011 at 17:20
@slolife Does @Andrew Whitaker's link work for you? I'm confused whether "it is definitely not working in Chrome or FF" applies to your page or his test. — Briguy37
– Briguy37, Commented Jun 22, 2011 at 17:22

Briguy37 · Accepted Answer · 2011-06-22 17:07:51Z

1

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.

answered Jun 22, 2011 at 17:07

Briguy37

8,4523 gold badges36 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

slolife Over a year ago

Updated the question with this info: jQuery 1.4.3 Fails in FireFox/Chrome, works in IE9

Briguy37 Over a year ago

@slolife Hmmm...too bad jsFiddle doesn't provide testing for JQuery 1.4.3. However, it works for me in both 1.4.4 and 1.3.2 in both firefox 3.5.15 and Chrome 12.0.742.100, so confused why it would be broken in 1.4.3. I'd recommend updating to a newer JQuery version if you are sure that's the problem.

slolife Over a year ago

Moving to jQuery 1.6 fixed it, although I am still confused why it worked at some point, then stopped working in FF but still worked in IE.

Bernard Chen · Accepted Answer · 2011-06-22 17:30:57Z

1

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");

edited Jun 22, 2011 at 17:30

answered Jun 22, 2011 at 17:24

Bernard Chen

6,5775 gold badges25 silver badges27 bronze badges

2 Comments

Bernard Chen Over a year ago

It appears that my answer is not necessary. As others have stated, the sample code appears to work across browsers and with jQuery 1.4.3.

slolife Over a year ago

I tried changing the code to do what you suggested and it still did not work. Thanks for the tip though.

slolife · Accepted Answer · 2011-07-13 22:14:32Z

0

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.

answered Jul 13, 2011 at 22:14

slolife

19.9k20 gold badges80 silver badges126 bronze badges

Comments

Luca · Accepted Answer · 2012-10-21 01:57:09Z

0

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

It worked for me.

edited Oct 21, 2012 at 1:57

Luca

9,8155 gold badges48 silver badges61 bronze badges

answered May 30, 2012 at 19:20

Born2Program

1

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related