擴大的div通過AJAX

Question

返回

考慮下面的Javascript的jQuery代碼來動態增加一個div：

$('.expandingThumbnail').hover(function() { 
    $(this).animate({ 
     height: '32px', 
     width: '32px' 
    }, 500); 
},function() { 
    $(this).animate({ 
     height: '128px', 
     width: '128px' 
    }, 500); 
}); 

，可被任何理論DIV操作：

<div class="expandingThumbnail">Hi!</div> 

只要這個div返回爲部分頁面請求，它按預期展開。但是，如果這個div作爲AJAX請求的一部分返回並通過jQuery的.html()方法插入到另一個div中，那麼div不會按預期展開。這是爲什麼，我該如何解決它？

Answer 1

這是動態生成內容的典型問題;直接事件處理程序僅適用於調用時已存在的元素。您需要將您的處理程序綁定到靜態父元素，以處理由新元素觸發的事件。有關詳細信息，請參見.on。請注意，您可以（和）用下面的document替換爲最接近的靜態父元素.expandingThumbnail以提高性能。

$(document).on('mouseenter', '.expandingThumbnail', function() { 
    $(this).animate({ 
     height: '32px', 
     width: '32px' 
    }, 500); 
}).on('mouseleave', '.expandingThumbnail', function() { 
    $(this).animate({ 
     height: '128px', 
     width: '128px' 
    }, 500); 
});