Question

我有一个页面可以从json恢复数据并生成产品列表。当单击将父级ul更改为ul.fullview的按钮时，用户可以在两种不同的样式之间切换。在使用ul.fullview浏览产品时，收到类.highlighted的产品应显示更大的缩略图，而其他产品则获得适合布局的绝对位置。这完全由CSS和一个简单的tooggleClass（）完成。问题在于这两个不同视图中的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');

我做错了什么？

Answer 1

你在说：

将父ul更改为ul.fullview

我会假设ul.fullview动态，因为在绑定时它只是ul而没有'fullview'类，但后来动态更改为拥有该类。

试试这个：

$('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');

Answer 2

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

jQuery - 关于动态添加元素的on（）问题

2 个答案: