jQuery 选择器 -答案

【问题标题】：JQuery selector -jQuery 选择器 -
【发布时间】：2011-01-06 20:28:36
【问题描述】：

我想弄清楚为什么我的代码不起作用，我快疯了。

我正在设置一个带有活动类的 li 元素，它可以工作..

然后我想选择具有“活动”类的 li 元素 - 并给它一个单击功能，将另一个 div 滑动到视图中，该 div 也由“活动”类标识

这是我的代码：

$(".contentPanel").click(function() {
  $(this).siblings().animate({height: minHeight,},500).removeClass("active");
  $(this).animate({height: maxHeight,},500).addClass("active");
  $('li').removeClass("active");
  $(this).children('ul').children('li').addClass("active");
  $('.infoPanelSlider').removeClass("active");
  $(this).children('.infoPanelWindow').children('.infoPanelSlider').addClass("active");
});

以上工作，活动“contentPanelSlider”内的 li 元素被赋予活动类。

下一点是我卡住的地方：

我想写这个：

$('li.active').click(function()....做点什么

但“活动部分”似乎不起作用 - 如果我只针对“li”，没有活动类选择器，它就可以工作......

我想知道这是否与活动类是由 JQuery 动态添加的事实有关，而不是在样式表中硬编码 - 但这是一个完整的猜测..

如果可以的话请帮忙，我不介意被喷……

【问题讨论】：

附带说明，对象中的尾随逗号：{height: minHeight,} 将在 IE 中中断并出现语法错误。删除它...
另外 - 与其调用 jQuery 4 次来解析 $(this)，不如执行 var $this = $(this); 之类的操作，然后使用 $this 进行进一步操作

标签： jquery class selector

【解决方案1】：

是的，你的怀疑是正确的。 jQuery 选择器在执行时解析。如果您在起始网站期间寻找li.active，则没有匹配项。 jQuery 提供了live() 和delegate() 可以通过在更高级别检查每个点击事件来解决这个问题。

// will match any click event on any li with the class active when it is clicked:
$('li.active').live('click', function() {
   alert('Active Clicked');
});

【讨论】：

【解决方案2】：

是的。它的发生是因为该类是动态添加的。使用jquery的live函数将click事件绑定到li

$('li.active').live('click',function(){ //做点什么。 });

【讨论】：

【解决方案3】：

您可以将处理程序附加到所有li 并检查它们是否具有active 类：

$('li').click(function() {
    if($(this).is('.active')) {
        // do more
    }
});

更好的（如果你有很多lis）是delegate 事件。这只会添加一个事件处理程序（而之前的解决方案将向每个 li 元素添加一个事件处理程序，从而消耗更多内存）。你只需要有一个共同的祖先：

ancestor.delegate('li.active', 'click', function() {
      // do more
});

$('li.active') 仅在lis 具有此类在您分配处理程序时而不是在执行处理程序时才有效。因此：

$(".contentPanel").click(function(){});
$("li.active").click(function(){});

如果该类中还没有li 元素，则不会工作，但是这个

$(".contentPanel").click(function() {
    // add class to li
    $('li.active').click(function(){});
});

会起作用的。但它也会每次都添加事件处理程序，因此分配一次并测试更好。

【讨论】：

【解决方案4】：

如果 live 不起作用，您可以尝试绑定：

$('li.active').bind('click',function(){
//do something 
});

【讨论】：