使用 appendTo() 时，单击事件未绑定到动态元素

Question

我知道对于动态 dom 元素我需要使用 jQuery.fn.on 或委托，但是如果我 'move' 元素容器附加到 dom 中的另一个元素，点击不再起作用。

这是重现问题的 jsFiddle： http://jsfiddle.net/j0L7c51f/

目前我正在使用以下绑定方法：

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

如果我注释掉使用 appendTo() 移动 ul 元素的代码行，点击事件绑定工作正常。

Answer 1

问题是由于您使用了 mousemove，而不是委托的事件处理程序，因为每次鼠标移动时都会重新构建 HTML。这意味着委托的事件处理程序在单击的元素上正确触发，但该元素立即从 DOM 中删除，因此事件在向上传播 DOM 进行处理之前被取消。

要解决此问题，请改用 a 上的 mouseenter 事件：

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

Updated fiddle

使用 appendTo() 时，单击事件未绑定到动态元素

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

html

javascript

jquery

jquery-events