javascript - 单击更改 Div 类需要多次单击才能生效

Question

我在这个问题中使用了方法: change div class onclick on another div, and change back on body click

所以这是我的 jQuery 函数:

jQuery('.checkbox_wrapper').on('click', function(e){
   jQuery(this).parent()
   .toggleClass('not_selected')
   .toggleClass('selected'); 
});

但是它似乎并没有正常工作。在类更改之前需要多次点击。

查看我的 jsfiddle: http://jsfiddle.net/7A3vw/

我认为它可能与 javascript 冲突，所以我将其精简到最基本的部分，但即使使用单个函数，在类实际更改之前也需要多次单击。因为生产环境有1 click toggle a hidden checkbox，多次点击是不合理的。

谁能帮我找出导致此问题的原因？

Answer 1

点击函数会触发两次，一次针对图像，一次针对输入，因为两者都会冒泡到父元素，并且触发两次会再次还原类 (proof)。

只需定位图片即可，因为这是您真正想要点击的内容，而不是父图片:

jQuery('.deck_card img').on('click', function (e) {
    jQuery(this).closest('div').parent().toggleClass('not_selected selected')
});

FIDDLE