.on()与.live()类似，对于动态创建的元素也能起作用（例如我使用$('.foo').on('click', function(){alert('click')});然后由于某些AJAX原因创建了一个带有foo类的元素，现在我期望点击该元素时会弹出警报）。然而实际结果并非如此。我可能犯了错误，但有人可以帮助我理解如何在使用.on()的情况下实现这些结果吗？.on()可以与动态创建的元素一起使用，只要正确使用就可以了。 jQuery文档对此进行了相当好的描述。
在处理动态元素时，可以使用以下形式:
$("static selector").on('click', "dynamic selector", fn);
静态选择器必须解析为一些同时是动态对象的祖先且是静态的 - 当您运行此代码行时存在且不会被删除或重新创建的对象。
动态选择器是与您的动态元素匹配的选择器。它们不必在事件处理程序首次安装时存在，而且可以随意添加和移除。
因此，如果"＃container"匹配静态祖先并且".foo"匹配您希望单击处理程序的动态元素，则应使用此代码；
$("#container").on("click", ".foo", fn);
.on（）委托事件处理的工作方式。当您在上面进行.on（）调用时，它将点击事件处理程序附加到#container对象。稍后，当您单击.foo对象时，实际上没有单击处理程序，因此单击冒泡到祖先链。当单击到达#container对象时，有一个单击处理程序，jQuery查看该处理程序并发现此处理程序仅适用于原始单击对象匹配选择器".foo"的对象。它测试事件目标以查看是否匹配该选择器，如果是，则为其调用事件处理程序。.live()方法通过将所有事件处理程序附加到文档对象来工作。由于文档对象是文档中每个对象的祖先，因此它们以这种方式获得委派的事件处理。所以，在上面的例子中，这两个是等价的：$(document).on("click", ".foo", fn);
$(".foo").live("click", fn);
但是，将所有委托事件处理程序附加到文档上有时会创建严重的性能瓶颈，因此jQuery决定这是一种不好的方式，最好要求开发人员指定一个静态祖先，该祖先希望比文档对象更接近实际目标对象。