jquery 无法识别 .removeClass().addClass() 之后的新类

Question

也许我这样做不正确/效率低下，但这对我不起作用：

$(document).ready(function(){
    $('li.taglink').click(function(){
        alert('clicked tag');
        $userClicked = $(this).html();
        $('#holder').children('div').each(function () { 
            $('li.taglinkcurrent').removeClass('taglinkcurrent').addClass('taglink');                                       
            $x = $(this).attr("tags");
            ele = $x.split(',');
            for (var i = 0; i < ele.length; i++) 
            {
            if ($userClicked == ele[i]) {$(this).show(495); break;} 
                                    else {$(this).hide(495);}   
            }
        });
        $(this).removeClass('taglink').addClass('taglinkcurrent');
    });
    $('li.taglinkcurrent').click(function(){
        alert('clicked current');
        $('li.taglinkcurrent').removeClass('taglinkcurrent').addClass('taglink');                               
        $('li.taglink').show(495);
    });
});

该页面包含具有包含多个标签的"标签"属性的div。我还有一个无序列表，每个 li 元素都包含各个标签。当用户单击其中一个 li 元素时，它会显示具有该标签的所有div，并隐藏其他所有内容。如果用户单击相同的 li 元素，它将再次显示所有内容。我添加了警报来测试发生了什么，每次我单击链接时，即使 li 将其类切换到 .taglinkcurrent，它也会弹出"单击链接"。对我做错了什么有什么想法吗？

Answer 1

首次运行代码时，您将绑定到 click() 事件，因此"taglink"类是唯一在起作用的类。

要根据对 dom 的更改更改函数，请改用 on() 方法：

http://api.jquery.com/on/

$(document).on("click", "li.taglink", function() { 
  // ... 
});

但是，on()方法有很多注意事项 - 有关更多详细信息，请参阅上面的文档。

编辑：从v1.7开始将"实时"更改为"on"，这是首选方法。

Answer 2

我想该事件归因于加载时的每个 li，并且随后的类更改不会解除该事件的绑定。但是您可以通过这种方式轻松解决此问题，我认为：

$('li').click(function() {
    if ( $(this).hasClass("taglink") ) {
        alert("clicked tag");
        ...
    } else if ( $(this).hasClass("taglinkcurrent") ) {
        alert('clicked current');
        ...
    }
});