jQuery : hover event not work for appended object with ajax request

Question

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

我添加<div class="item ..."> ... </div>与

Ajax 调用:

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

悬停事件委托(delegate):

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

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

谢谢

Answer 1

您需要使用event delegation对于动态添加的元素，因此:

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