jQuery - 动态添加元素的 on() 问题答案

【问题标题】：jQuery - on() issue on dynamically added elementsjQuery - 动态添加元素的 on() 问题
【发布时间】：2012-08-14 07:48:19
【问题描述】：

我有一个从 json 恢复数据并生成产品列表的页面。当单击将父 ul 更改为 ul.fullview 的按钮时，用户可以在两种不同的样式之间切换。浏览带有 ul.fullview 的产品时，收到 .highlighted 类的产品应该以更大的缩略图显示，而其他产品会收到一个绝对位置以适应布局。这一切都由 CSS 和一个简单的 toggleClass() 完成。问题在于这两个不同视图中的 mouseenter / mouseleave 事件。使用默认视图浏览时，所有产品都应具有相同的动画。当父ul为.fullview时，.highlighted产品必须有不同的动画。由于我使用的是动态添加的元素，因此我不得不使用 .on() 而不是 .hover()。如何使这些选择器与 .on() 一起使用？

$('div.products ul:not(.fullview) li:not(.highlighted)').hover(
  function () {
    $(this).find($('div.tooltip')).show();
    $(this).find($('div.fb-like')).fadeIn(150);
  }, 
  function () {
    $(this).find($('div.tooltip')).fadeOut(150);
    $(this).find($('div.fb-like')).fadeOut(150);
  }
);

$('li.highlighted').hover(
  function () {
    $(this).find($('div.description')).show();
    $(this).find($('div.fb-like')).fadeIn(150);
  }, 
  function () {
    $(this).find($('div.description')).fadeOut(150);
    $(this).find($('div.fb-like')).fadeOut(150);
  }
);

如果元素不是由 javascript 添加的，上面的代码应该可以工作。我能够使用下面的脚本使默认视图工作：

$('div.products ul').on({
    mouseenter: function () {
    $(this).find($('div.tooltip')).show();
    $(this).find($('div.fb-like')).fadeIn(150);
    },
    mouseleave: function () {
    $(this).find($('div.tooltip')).fadeOut(150);
    $(this).find($('div.fb-like')).fadeOut(150);
    }
}, 'li');

但是当我添加这些行时，它会停止加载 json 数据：

$('div.products ul.fullview').on({
    mouseenter: function () {
    $(this).find($('div.description')).show();
    $(this).find($('div.fb-like')).fadeIn(150);
    },

    mouseleave: function () {
    $(this).find($('div.description')).fadeOut(150);
    $(this).find($('div.fb-like')).fadeOut(150);
    }
}, 'li.highlighted');

我做错了什么？

【问题讨论】：

你在一行中有facebook-like，其余的都引用fb-like。
在旧代码中，您有选择器 div.products:not(.fullview) - 表示全视图类在 div.products 上，而在新代码中，您的选择器显示 div.products ul.fullview - 表示全视图类不再打开div，但它移动到 ul。
我对代码做了一些改动，因为这些类是用另一种语言编写的。

标签： jquery json dynamic hover live

【解决方案1】：

你是说：

将父 ul 更改为 ul.fullview

我会假设 ul.fullview 在绑定时是动态的，它只是一个没有“fullview”类的ul，但随后动态更改为具有该类。

试试这个：

$('div.products').on({
    mouseenter: function() {
        $(this).find($('div.description')).show();
        $(this).find($('div.facebook-like')).fadeIn(150);
    },

    mouseleave: function() {
        $(this).find($('div.description')).fadeOut(150);
        $(this).find($('div.fb-like')).fadeOut(150);
    }
}, 'ul.fullview li.highlighted');

【讨论】：

+1，令人惊讶的是，这个问题每天会以不同的形式出现十次，当搜索或仅阅读 DOCS 时就会很清楚问题是什么。
@adeno: +1，我认为使用完整的 HTML 元素总是更明显，但是当在选择器中动态添加和使用类来绑定事件时，我确实理解它并不总是那么明显.但是，您绝对 100% 正确，阅读 jQuery 文档非常非常有用。

【解决方案2】：

为了您的方便，我将这两个答案合并为JSFiddle。括号和选择器根据其他人的答案进行了调整。

【讨论】：