jquery - jQuery-动态添加元素上的on()问题

我有一个页面，可从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');

我究竟做错了什么？

最佳答案

你是说：


将父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');​

关于jquery - jQuery-动态添加元素上的on()问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12012959/