为什么我的第二个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以最小化此开销.