Question

我有一个元素，当选中一个复选框时，会添加一个类并从元素中删除..现在，当选中该复选框时，类被正确添加，但是，.on（'click'）处理程序添加了类的元素将被忽略。如果我手动将类添加到元素中，则不会忽略.on（'click'）元素。

例如..

当复选框被激活时，它会将.delete类添加到，但是，在通过jquery添加类之后单击该类时，以下代码永远不会被执行。但是，如果该类在

中进行了硬编码，它将起作用

$('a.delete').on('click',function(e){
    e.preventDefault();
    console.log('delete clicked');

    });

是否无法为具有通过addClass（）添加的类的元素设置on click事件？我觉得这是一个简单的问题..

Answer 1

您必须收听DOM（文档本身），而不是新添加的对象：

$(document).on('click', 'a.delete', function( event ) {
  //code - use Event for preventing 
  //any default behaviour 
});

$('.classdiv').click()通常仅适用于当前放置的DOM元素。

Answer 2

动态添加和删除类需要委托事件处理程序，因为在附加事件处理程序时元素没有delete类：

$(document).on('click', 'a.delete', function(e){
    e.preventDefault();
    console.log('delete clicked');
});

用父元素替换document。

Answer 3

试试这个

$(document).on('click', 'a.delete' ,function(e){
    e.preventDefault();
    console.log('delete clicked');
});

Answer 4

这是因为jquery选择器返回在创建对象时匹配的所有元素。然后它将事件处理程序附加到这些元素。如果稍后元素更改为匹配或不匹配该选择器，则它不会返回并附加或删除处理程序。

要解决此问题，您需要使用事件委派，on。

$(STATIC_ANCESTOR).on("click", "a.delete", function(){...

其中STATIC_ANCESTOR是一个不会重新加载的祖先元素。如果不存在其他拟合元素，则可以是document。尽管出于性能原因，您希望此元素在DOM中尽可能低。

您可以在on documentation中了解有关事件委派的更多信息。

Answer 5

使用live而不是“on”

$('a.delete').live('click',function(e){
    e.preventDefault();
    console.log('delete clicked');

    });