jQuery .live() vs .on()方法，用于在加载动态html后添加单击事件

我使用的是jQuery v.1.7.1，其中.live()方法显然已弃用。

我遇到的问题是，当动态加载html到一个元素使用:

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

如果我尝试添加一个点击事件之后，它不会注册事件使用这些方法:

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

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

实现这个功能的正确方法是什么?它似乎只与.live()为我工作，但我不应该使用该方法。注意，#child是一个动态加载的元素。

谢谢。

当前回答

.on()适用于jQuery 1.7及以上版本。如果你有一个旧版本，使用这个:

$("#SomeId").live("click",function(){
    //do stuff;
});

其他回答

试试这个:

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

在$.on()文档中:

事件处理程序仅绑定到当前选定的元素;他们在代码调用.on()时，必须存在于该页上。

当你调用$.on()时，你的#子元素不存在，所以事件没有被绑定(不像$.live())。但是，#parent确实存在，所以将事件绑定到它是可以的。

我上面代码中的第二个参数充当了一个“过滤器”，仅当事件从#child冒泡到#parent时才触发。

美元(文档)。('点击','。Selector '， function() {/* do stuff */});

编辑:我提供了更多关于这是如何工作的信息，因为……单词。在这个示例中，您将在整个文档上放置一个侦听器。

当您单击任何匹配.selector的元素时，事件会冒泡到主文档中——只要没有其他侦听器调用event. stoppropagation()方法——这将使事件冒泡到父元素。

不是绑定到特定的元素或元素集，而是侦听来自匹配指定选择器的元素的任何事件。这意味着您可以一次创建一个侦听器，它将自动匹配当前存在的元素以及任何动态添加的元素。

这是明智的，原因有几个，包括性能和内存利用率(在大型应用程序中)

编辑:

显然，您可以监听的最接近的父元素更好，并且您可以使用任何元素来代替document，只要您想要监视事件的子元素位于该父元素中……但这真的和问题没有任何关系。

如果你想让点击处理程序为一个动态加载的元素工作，那么你在一个父对象上设置事件处理程序(不动态加载)，并给它一个匹配你的动态对象的选择器，如下所示:

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

事件处理程序将被附加到#parent对象上，任何时候一个起源于#child的点击事件都会触发你的点击处理程序。这称为委托事件处理(事件处理委托给父对象)。

这样做是因为即使#child对象还不存在，你也可以将事件附加到#parent对象上，但当它之后存在并被单击时，click事件将弹出到#parent对象，它将看到它起源于#child，并且有一个事件处理程序用于单击#child并触发你的事件。

.on()适用于jQuery 1.7及以上版本。如果你有一个旧版本，使用这个:

$("#SomeId").live("click",function(){
    //do stuff;
});

在1.7中，等价的.live()是这样的:

$(document).on('click', '#child', function() ...);

基本上，查看文档中的单击事件，并为#child筛选它们。

推荐文章