代码之家 › 专栏 › 技术社区 › Giox

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

jquery-events jquery html javascript

Giox · 技术社区 · 8 年前

我知道,对于动态dom元素,我需要使用 jQuery.fn.on 或者委托,但如果我“移动”元素容器,将其附加到dom中的其他元素,则单击不再起作用。

下面是JSIDLE来重现问题: http://jsfiddle.net/j0L7c51f/

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

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

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

1 回复 | 直到 3 年前

Rory McCrossan Hsm Sharique Hasan 8 年前

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

要解决此问题,请使用 mouseenter 事件 a 相反:

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

Updated fiddle

推荐文章

Saubhik Mandal · Javascript自定义事件从返回false的函数激发

7 年前

JLR · 当输入字段有值时,从“提交”按钮中动态删除禁用的值

7 年前

Marco · 在ajaxStop之前执行的表单提交处理程序

7 年前

Giox · 使用appendTo()时,单击事件不绑定到动态元素

8 年前

Nicolas Frbezar · Javascript事件侦听器问题

8 年前

Katrina · 对未定义事件使用off()时,jQuery会抛出错误吗?

8 年前

thesowismine · 从下拉列表中选择选项时,JS未按预期工作

9 年前

Micaiah Wallace · 未触发更改时的jQuery文件输入

9 年前

radbyx Matt · 数据表。如何停止搜索。dt事件从事件处理程序内部触发

9 年前

Jos · JQuery移动页面containertransition事件未按预期工作

9 年前