3

我似乎无法删除“foo”类，我不明白为什么。当用户点击 .foo 时，jQuery 会删除 .foo。乍一看，它似乎可以工作，因为文本不再是红色的。但是，多次单击 .foo 会导致出现警告框，这意味着 .foo 尚未完全删除。我不明白为什么会这样。

jQuery：

$(document).ready(function() {
    $('.foo').click(function() {
        $(this).removeClass('foo');
        alert('Class .foo should have been removed. Why is this alert still appearing?');
    });             
});​

html:

<p class="foo">foo</p>​

CSS：

.foo { color: red; }​

http://jsfiddle.net/Nvrp8/

4

4 回答 4

5

您需要取消绑定点击侦听器。

http://jsfiddle.net/Nvrp8/2/

$(document).ready(function() {
    $('.foo').click(function() {
        $(this).removeClass('foo');
        alert( 'Class .foo should have been removed. Why is this alert still appearing?' );     
        $(this).unbind('click');        
    });             
});​
于 2012-08-31T17:16:18.500 回答
4

如果您使用 on() 它实际上会评估每次单击的选择器，因为事件绑定到正文，而不是“.foo”

$(document).ready(function() {
    $("body").on("click", ".foo",function() {
        $(this).removeClass('foo');
        alert( 'Class .foo should have been removed. Why is this alert still appearing?' );       
    });             
});​

http://jsfiddle.net/Nvrp8/8/

于 2012-08-31T17:18:55.647 回答
3

当您运行时，您会得到一组当时$('.foo')具有的静态元素。因此，即使您稍后从这些元素中提取，您仍然将侦听器绑定到该原始元素集。class="foo" removeClass('foo')

如果您想改变这种行为，请考虑查看.onor .delegate。

于 2012-08-31T17:18:49.340 回答
1

它工作得很好，听众仍然受到约束。http://jsfiddle.net/Nvrp8/5/

于 2012-08-31T17:17:58.070 回答