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

这是动态生成内容的典型问题；直接事件处理程序仅适用于调用时已经存在的元素。您需要将处理程序绑定(bind)到静态父元素，以便处理由新元素触发的事件。参见 .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);
});