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);
});

扩展通过AJAX返回的div

1 个答案: