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

Question

我有一个 jQuery ajax 表格。完成后，它更改了元素的 ID，如下所示：

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

然后，我想做一个针对 #done 的 mouseover() 函数。问题是它不起作用，因为 #done 没有在页面加载时加载。

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

Answer 1

您需要使用这种方法：

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

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

Answer 2

为此你需要使用事件-delegation:

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

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

通过事件委托，您可以将事件监听器绑定到现有的父级（在本例中为document）。这将监听其后代与 #done - 选择器匹配的所有事件。

jQuery trigger on element that is added after page load