Question

假设我有这段代码：

$('.mask-preview:not(.selected)').click(function () {
    $('.mask-preview.selected').removeClass('selected');
    $(this).addClass('selected');
    console.log("added");
});

现在，在具有class="mask-preview selected"的元素上，不会调用此处理程序。当我在没有selected的元素上调用它时，调用处理程序，并添加类。

但是现在，我仍然可以在该元素上调用该处理程序，如果添加selected也是如此。事实上，“处理程序”没有“更新”到DOM。有没有办法动态地做到这一点？

每次if(element.hasClass())

我都会去检查

Answer 1

绑定仅发生一次，并且在更改元素时不会更改。

最简单的方法就是检查回调中的类。

$('.mask-preview').on('click', function() {
    if ($(this).hasClass('selected')) {
        ...
    } else {
        ...
    }
});

编辑此答案已更新，感谢评论指出.on中的选择器仅适用于后代，而不适用于已注册的元素本身。

Answer 2

这样的东西？

$('#mask-preview').click(function () {
    if ( !$(this).hasClass('selected') ) {
        $(this).addClass('selected');
        console.log("added");
    } else {
        $(this).addClass('not_selected');
        console.log("added");
    }
});

Answer 3

可能.live可以帮助您

$('.mask-preview:not(.selected)').live('click',function () {
    $('.mask-preview.selected').removeClass('selected');
    $(this).addClass('selected');
    console.log("added");
});

Live Demo

“动态”处理程序？

3 个答案: