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元素，请用该ID替换document以最小化此开销。

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

1 个答案: