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

Posted 2023-05-09

【中文标题】jQuery 选择器忽略页面加载后操作的类

【英文标题】：jQuery selectors are ignoring the classes that are manipulated after the page loads

【发布时间】：2011-05-12 01:00:40

【问题描述】：

我有一些按钮，当单击它们时，会调用 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，但我现在完全迷路了。

任何指导将不胜感激。

【参考方案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');
);

【讨论】：

太棒了，非常感谢您的帮助！我以前从未遇到过 .live() 和 .delegate() 。它们看起来像是完成工作的方式！