jQuery.on() 是否适用于创建事件处理程序后添加的元素？

我一直以来的印象是.on()工作就像.live()关于动态创建的元素（例如我使用$('.foo').on('click', function(){alert('click')});然后是一个带有类的元素foo是由于某些 AJAX 创建的，现在我期望单击该元素会引发警报）。实际上，这些不是我得到的结果。我可能犯了一个错误，但有人可以帮助我理解new实现这些结果的方法，在.on()?

提前致谢。

.on()如果使用得当，可以与动态创建的元素一起使用。这jQuery 文档很好地描述了它。

将其用于动态元素的方法是使用以下形式：

$("static selector").on('click', "dynamic selector", fn);

静态选择器必须解析为某个对象，该对象既是动态对象的祖先，又是静态的 - 当您运行这行代码时存在并且不会被删除或重新创建。

动态选择器是与您的动态元素相匹配的选择器。它们不必在首次安装事件处理程序时就存在，并且可以根据需要频繁出现和消失。

So, if "#container"匹配静态祖先并且".foo"匹配您想要点击处理程序的动态元素，您可以使用它；

$("#container").on("click", ".foo", fn);

如果你真的想理解它，这就是委托事件处理的方式.on()作品。当你制作.on()上面的调用，它附加了一个点击事件处理程序#container目的。稍后当您单击.foo对象，实际没有点击处理程序.foo对象，因此点击会沿着祖先链向上冒泡。当点击到达#container对象，有一个单击处理程序，jQuery 查看该处理程序并发现该处理程序仅适用于原始单击对象与选择器匹配的对象".foo"。它测试事件目标以查看它是否与该选择器匹配，如果匹配，它将调用它的事件处理程序。

（现已弃用）.live()方法通过将所有事件处理程序附加到文档对象来工作。由于文档对象是文档中每个对象的祖先，因此它们以这种方式获得委托事件处理。因此，在上面的示例中，这两者是等效的：

$(document).on("click", ".foo", fn);
$(".foo").live("click", fn);

但是，在文档上附加所有委托事件处理程序有时会造成严重的性能瓶颈，因此 jQuery 认为这是一个糟糕的方法，最好要求开发人员指定一个静态祖先，该祖先希望比实际目标对象更接近文档对象。