Question

我有这段代码：

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

我想要的是：如果我点击图标铅笔，它应该改为icon-ok。但是在这里，它正在改变，但同时也在触发icon-ok事件（警告"test ok event"）。它为什么会发生？我希望它只在变化后发生，而不是在变化时发生。

我的HTML：

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

Answer 1

这真的很奇怪，我认为这是jQuery的反直觉行为 - 甚至可能是一个bug。问题是，为了第二个事件处理程序的目的，该元素被视为匹配选择器，即使事件被触发时也没有。

这有点像kludge，但它确实在这个狭窄的实例中修复了问题：

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

jsFiddle

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

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

Answer 2

您可以通过委派两个事件来处理它：

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

Answer 3

可能最干净的是在1个处理程序中执行所有操作：

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

jquery事件处理程序 - 新处理程序解雇得太早

3 个答案: