我有一个元素,当选中一个复选框时,会添加一个类并从元素中删除..现在,当选中该复选框时,类被正确添加,但是,.on('click')处理程序添加了类的元素将被忽略。如果我手动将类添加到元素中,则不会忽略.on('click')元素。
例如..
当复选框被激活时,它会将.delete类添加到,但是,在通过jquery添加类之后单击该类时,以下代码永远不会被执行。但是,如果该类在
中进行了硬编码,它将起作用$('a.delete').on('click',function(e){
e.preventDefault();
console.log('delete clicked');
});
是否无法为具有通过addClass()添加的类的元素设置on click事件?我觉得这是一个简单的问题..
答案 0 :(得分:2)
您必须收听DOM(文档本身),而不是新添加的对象:
$(document).on('click', 'a.delete', function( event ) {
//code - use Event for preventing
//any default behaviour
});
$('.classdiv').click()
通常仅适用于当前放置的DOM元素。
答案 1 :(得分:2)
动态添加和删除类需要委托事件处理程序,因为在附加事件处理程序时元素没有delete
类:
$(document).on('click', 'a.delete', function(e){
e.preventDefault();
console.log('delete clicked');
});
用父元素替换document
。
答案 2 :(得分:1)
试试这个
$(document).on('click', 'a.delete' ,function(e){
e.preventDefault();
console.log('delete clicked');
});
答案 3 :(得分:1)
这是因为jquery选择器返回在创建对象时匹配的所有元素。然后它将事件处理程序附加到这些元素。如果稍后元素更改为匹配或不匹配该选择器,则它不会返回并附加或删除处理程序。
要解决此问题,您需要使用事件委派,on
。
$(STATIC_ANCESTOR).on("click", "a.delete", function(){...
其中STATIC_ANCESTOR
是一个不会重新加载的祖先元素。如果不存在其他拟合元素,则可以是document
。尽管出于性能原因,您希望此元素在DOM中尽可能低。
您可以在on
documentation中了解有关事件委派的更多信息。
答案 4 :(得分:-1)
使用live而不是“on”
$('a.delete').live('click',function(e){
e.preventDefault();
console.log('delete clicked');
});