jquery - jQuery：悬停事件不适用于带有ajax请求的附加对象

Question

嗨，jQuery 悬停事件不适用于通过 ajax 附加的对象。

我<div class="item ..."> ... </div>加上

阿贾克斯调用：

 var jqxhr = $.ajax( '{{ path('nextPage_url') }}'+page )
              .always(function(data) { 
                  $("#container").append(data).masonry('reload');
               });

悬停事件委托：

我将鼠标悬停在 .item 类元素上，它适用于预加载的数据，但对于<div>通过 ajax 请求新添加的数据，它不起作用

        $('.item').hover(
            function(){
                $(this).addClass('img-polaroid-shadow').removeClass('img-polaroid');
            },
            function(){
                $(this).removeClass('img-polaroid-shadow').addClass('img-polaroid');
            }
        );

谢谢

Answer 1

这是因为当您应用事件处理程序并加载页面时，JavaScript 可以看到之前存在的元素，因此它仅将处理程序应用于这些元素。

但是，当您将项目（元素）附加到页面时，它不在 DOM 列表中。因此，在这种情况下，您需要使用事件委托。

只需使用 jQuery 的.on()或.delegate()方法。如果你想知道它是如何工作的，那么就去这里看一个简单的 jQuery 教程（不是参考，只是推荐）。

Answer 2

试试下面的代码

$(document).on('mouseover','span', function () {
        $(this).css('color','#CCC');
    });
    $(document).on('mouseout','span', function () {
        $(this).css('color','#000');
    });

jsFiddle 上的工作示例http://jsfiddle.net/HpL7X/

Answer 3

您需要对动态添加的元素使用事件委托，因此：

$(document).on(
{
    mouseenter: function() 
    {
        $(this).addClass('img-polaroid-shadow').removeClass('img-polaroid');
    },
    mouseleave: function()
    {
        $(this).removeClass('img-polaroid-shadow').addClass('img-polaroid');
    }
}
, '.item');