javascript - jQuery事件处理程序-新处理程序触发得太早

我有以下代码：

$('.icon-pencil').on('click',function(){
   $(this).removeClass('icon-pencil').addClass('icon-ok');
});
$('.fatherdiv').on('click','.icon-ok',function(){
    alert('test ok event');
});

我想要的是：如果我单击图标铅笔，则应更改为图标确定。但是在这里，它正在发生变化，同时还触发了图标正常事件（发出"test ok event"）。为什么会发生？我希望它仅在更改后才发生，而不是在更改时才发生。

我的html：

<div class="fatherdiv"><i class="icon-pencil"> </i></div>

最佳答案

这确实很奇怪，我认为这是jQuery违反直觉的行为-甚至可能是一个错误。问题在于，即使第二次事件处理程序未触发该元素，该元素仍被视为与第二个事件处理程序匹配的选择器。

这有点麻烦，但是确实可以解决此狭窄情况下的问题：

$(document.body).on('click','.icon-pencil',function(){
   $(this).removeClass('icon-pencil').addClass('icon-ok');
});

jsFiddle

在此方法中，我们将事件侦听器附加到树上，而不是原始委托事件上，因此，在检查该处理程序之前，不会修改该元素。

但是正如我所说，这是令人惊讶的行为。