CODEWITHSUNDEEP
javascripthtmljqueryjquery-events
Giox
Giox

Reputation: 5123

Click event is not bound to dynamic elements when appendTo() is used

I know that for dynamic dom elements I need to use jQuery.fn.on or delegate, but if I 'move' the elements container appending to another elements in the dom, the click doesn't work anymore.

Here is the the jsFiddle to reproduce the issue: http://jsfiddle.net/j0L7c51f/

Currently I'm using the following bind method:

$('#commoditySelector').on( 'click', 'li.available', function() {
    var cmID = $(this).attr('data-cmid');
    $('#debug').html('commoditySelected: '+ cmID);
});

If I comment out the code line where I move the ul element using appendTo(), the click event bound works fine.

Upvotes: 2

Views: 64

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue is caused by your use of mousemove, not the delegated event handler, as the HTML is being re-built every single time the mouse moves. This means that the delegated event handler is correctly fired on a clicked element, but that element is immediately removed from the DOM, so the event is cancelled before it propagates up the DOM to be processed.

To fix this issue, use the mouseenter event on the a instead:

$('#commodityCategories li a').mouseenter(function(e) {
    // your code...
});

Updated fiddle

Upvotes: 3

Related Questions