Question

我在这段代码中理解逻辑时遇到问题：

$(".not-clicked").click(function() {
    $(this).addClass("clicked");
    $(this).removeClass("not-clicked");    
    console.log("123");
});

http://jsfiddle.net/s6yvp1dL/1/

我要做的是改变＆＃34; .not-clicked＆＃34; div to＆＃34; .clicked＆＃34;点击后点击。但是在它发生变化后，点击了新的点击次数，然后点击了＃34; div不断记录＆＃39; 123＆＃39;就好像它仍然是＆＃34;。没有点击＆＃34;。为什么会这样？

Answer 1

click函数仅在首次调用函数时查找并将事件绑定到元素。相反，您需要使用on方法。

$('.wrapper').on('click', '.not-clicked', function(){
      $(this).addClass('clicked');
      $(this).removeClass('not-clicked');
      console.log('123');
 });

示例：http://jsfiddle.net/s6yvp1dL/3/

Answer 2

这是因为在首次执行代码时，事件委派只发生。它不是一个与未来相匹配的规则，只需分配一次就可以了。在你的演示中你有4个div，它们都是'未点击'的类，但是，就元素集合而言，它与使用'div'作为你的选择器一样。

如果您希望代表将来发生事件，那么只有与将来给出的选择器匹配的元素才能处理事件，那么您应该使用jQuery的on。 on会将事件处理程序附加到父对象，并且每当处理事件时，它将查找与选择器匹配的子元素，然后使用该元素作为范围发出事件回调（this ）。

$('body').on('click','.not-clicked',function(){
 $(this).addClass("clicked");
 $(this).removeClass("not-clicked");    
 console.log("123");
});

jQuery .click（）方法中的逻辑问题

2 个答案: