jquery - 为什么我的第二个 jQuery 匿名函数在调用时不运行？

Question

看看下面这段代码：

$(document).ready(function() { 
    $('a.upvote-off').click(function() {
        $(this).removeClass('upvote-off').addClass('upvote-on');
    });
    $('a.upvote-on').click(function() {
        $(this).removeClass('upvote-on').addClass('upvote-off');
    });
});

这是一个简单的 jQuery 切换函数，它删除upvote-off锚标记的类，然后将其替换为upvote-on. 同样，当再次单击同一图标时，代码的第二部分会反转初始代码。锚标记的默认值为upvote-off.

函数的第一部分运行：

$('a.upvote-off').click(function() {
    $(this).removeClass('upvote-off').addClass('upvote-on');
});

但是，第二个不起作用：

$('a.upvote-on').click(function() {
    $(this).removeClass('upvote-on').addClass('upvote-off');
});

但是，如果我注释掉第一部分，则第二部分有效。为什么是这样？

请注意，我没有使用.toggleClass()，因为我想在以后添加一些更复杂的功能。

Answer 1

问题是您在页面首次加载时仅将处理程序绑定到具有指定类的元素。如果元素的类发生变化，绑定不会自动跟随它。

要解决此问题，请使用委托与.on().

$(document).ready(function() { 
    $(document).on('click', 'a.upvote-off', function() {
        $(this).removeClass('upvote-off').addClass('upvote-on');
    });
    $(document).on('click', 'a.upvote-on', function() {
        $(this).removeClass('upvote-on').addClass('upvote-off');
    });
});

如果有一个较小的 DIV 包含所有 upvote 元素，请替换document为该 ID 以最小化此开销。