页面加载后添加的元素上的jQuery触发器

Question

我有一个jQuery ajax表单。当它完成后，它改变了这样一个元素的ID：

jQuery('#ready').attr('id','done');

然后，我想针对mouseover()执行#done功能。问题是它不起作用，因为页面加载时没有加载#done。

这个问题的正常解决方案是什么？

Answer 1

您需要使用此方法：

$( document ).on( 'mouseover', '#done', function() {
   //...
});

在这种情况下，您的函数处理程序将附加到document，而mouseover它将搜索要激活的#done元素。

Answer 2

您需要使用事件 - delegation：

$(document).on('mouseover', '#done', function(){
    //do something
});

在#done上注册鼠标悬停的事件监听器后，您将内容附加到DOM 。因此，在将事件绑定到它时，此元素不存在。

通过事件委派，您可以将事件列表器绑定到现有父级（在这种情况下为document）。这将听取与#done - 选择器匹配的后代的所有事件。