Javascript 扩展通过AJAX返回的div

考虑以下用于动态扩展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不会按预期扩展。这是为什么？我该如何解决它？

这是动态生成内容的典型问题；直接事件处理程序仅应用于调用时已存在的元素。为了处理新元素触发的事件，需要将处理程序绑定到静态父元素。有关详细信息，请参阅。请注意，您可以（也应该）使用最近的、静态父元素的选择器替换下面的

文档
。expandingThumbnail
，以提高性能

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

你能提供用于扩展动态填充div的代码吗？@AshishGupta其实并不重要，它只是意味着页面加载时内容不存在（即js运行时内容不存在）@AD7six正在运行：）谢谢，nbrooks
expandingThumbnail
实际上没有一个直接的父级，这些div将出现在三个不同的可能的父级div下（它们也是动态发送的：
document->staticDiv1->staticDiv2->dynamicTable->dynamicTableTr->dynamicTableTd->expandingthumnail
）。该代码目前不适用于我，但我现在正在用谷歌搜索
on
方法。谢谢你的推动！我似乎对这种方法所做的任何事情都不能使它起作用，即使对于非AJAX内容也是如此。这里有一个提琴：@dotancohen如果您选择左侧面板上的jquery框架，您的提琴工作得很好谢谢！此外，在应用程序中，我们使用jquery1.6，但我看到只有在1.7中才添加了
on
方法。更新到1.8.2可以解决此问题。谢谢