javascript - 扩展通过 AJAX 返回的 div

Question

考虑以下用于动态扩展 div 的 Javascript jQuery 代码：

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