jQuery .live（）vs .on（）方法，用于在加载动态html后添加click事件

Question

我正在使用jQuery v.1.7.1，其中显然不推荐使用.live（）方法。

我遇到的问题是，使用以下方法将html动态加载到元素中时：

$('#parent').load("http://...");

如果我尝试在之后添加click事件，则不会使用以下两种方法之一注册事件：

$('#parent').click(function() ...);

要么

// according to documentation this should be used instead of .live()
$('#child').on('click', function() ...);

实现此功能的正确方法是什么？它似乎只对.live（）有效，但我不应该使用该方法。请注意，#child是动态加载的元素。

谢谢。

Answer 1

如果您希望单击处理程序适用于动态加载的元素，则可以在父对象（不会动态加载）上设置事件处理程序，并为其提供一个与动态对象匹配的选择器，如下所示：

$('#parent').on("click", "#child", function() {});

事件处理程序将附加到该#parent对象，并且只要单击事件在源于的事件上冒泡#child，它就会触发您的单击处理程序。这称为委托事件处理（事件处理委托给父对象）。

之所以这样做，是因为#parent即使该#child对象尚不存在，您也可以将事件附加到该对象上，但是当它后来存在并被单击时，click事件将冒泡到该#parent对象，它将看到它起源于#child和有一个事件处理程序可以单击#child并触发您的事件。