jQuery 选择器忽略页面加载后操作的类

Question

我有一些按钮，当单击它们时，会调用 jQuery 来删除和替换它们的类。我要调用的 jQuery.mouseover 事件忽略了被操作的类，只服从页面加载中的类。

这是一个例子JSFiddle

详情如下：

我有一排按钮，当滚动时调用一些 jQuery 以将 .highlighted 类添加到页面上其他位置的对象：

这里是 HTML 示例：

<ul id="portfolioLinks">
    <li class="activeButton kittens"><a class="kittens" href="#"></a></li>
    <li class="activeButton otters"><a class="otters" href="#"></a></li>
    <li class="depressed donkey"><a class="donkey" href="#"></a></li>
</ul>

以及对应的jQuery代码：

var selectedType = '.' + $(this).attr('class');


$("li.activeButton a").mouseenter(function() {

    var selectedType = '.' + $(this).attr('class');

    $("div.pageContent div" + selectedType).addClass('highlighted');

});     

$("#portfolioLinks a").mouseleave(function() {

    $("div.pageContent div").removeClass('highlighted');

});

这适用于页面加载的静态内容，但是当我点击一个按钮时，我得到 jQuery 将 .depressed 类添加到 $(this) 并给所有其他 .activeButton：

$("#portfolioLinks a").click(function() {


    $("#portfolioLinks li").addClass('activeButton').removeClass('depressed');

    $(this).parent().removeClass('activeButton').addClass('depressed');

//do some other stuff

}); 

但是，它似乎完全忽略了更改的类，并继续突出显示与缺少 .activeButton 类的按钮匹配的 div。

我昨晚和今天早上的大部分时间都在试图解决这个问题。我已经尝试了各种.nots、:nots 和ifs，但我现在完全迷路了。

任何指导将不胜感激。

Answer 1

在此处改用.delegate()，如下所示：

$("#portfolioLinks").delegate("li.activeButton a", {
   mouseenter: function() {
    var selectedType = '.' + $(this).attr('class');
    $("div.pageContent div" + selectedType).addClass('highlighted');
  },
  mouseleave: function() {
    $("div.pageContent div").removeClass('highlighted');
  });

Here's your fiddle updated with the above code, working.

问题在于，当您执行$("li.activeButton a") 时，您没有将任何内容绑定到类，而是将事件绑定到您发现 类的元素运行时...元素现在绑定了事件处理程序。未来的任何变化都无关紧要，处理程序是受约束的。

然而，对于.live() 和.delegate()，选择器会在事件发生时检查，因此类更改确实很重要。作为奖励，它对于许多元素来说也更便宜，因为在 #portfolioLinks 上有 一个 组处理程序。

---

如果使用早于 1.4.3 的 jQuery，则需要非映射表单，如下所示：

$("#portfolioLinks").delegate("li.activeButton a", "mouseenter", function() {
    var selectedType = '.' + $(this).attr('class');
    $("div.pageContent div" + selectedType).addClass('highlighted');
}).delegate("li.activeButton a", "mouseleave", function() {
    $("div.pageContent div").removeClass('highlighted');
});