Question

我正在使用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是动态加载的元素。

感谢。

Answer 1

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

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

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

这样做是因为你可以将事件附加到#parent对象，即使#child对象尚不存在，但是当它稍后存在并被点击时，点击事件将会冒泡在#parent对象之前，它会看到它来自#child并且有一个事件处理程序可以点击#child并触发您的活动。

Answer 2

试试这个：

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

来自$.on()文档：

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

当您在#child上调用$.on()时，$.live()元素不存在，因此事件不受约束（与#parent不同）。 #parent但是，确实存在，因此将事件绑定到该文件就可以了。

上面代码中的第二个参数充当了＆＃39;过滤器＆＃39;仅在事件从#child冒出{{1}}时触发。

Answer 3

$(document).on('click', '#selector', function() { /* do stuff */ });

编辑：我提供了更多有关其工作原理的信息，因为...单词。在此示例中，您将在整个文档上放置一个侦听器。

当你click匹配#selector的任何元素时，事件会冒泡到主文档 - 只要没有其他侦听器调用event.stopPropagation()方法 - 这会使事件冒泡到父元素之上。

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

这很聪明，原因有几个，包括性能和内存利用率（在大型应用程序中）

Answer 4

1.7中的.live（）相当于：

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

基本上，请查看单击事件的文档并过滤#child。

Answer 5

我知道答案有点迟，但我已经为.live（）方法创建了一个polyfill。我已经在jQuery 1.11中对它进行了测试，它看起来效果很好。我知道我们应该尽可能地实现.on（）方法，但在大型项目中，无法将所有.live（）调用转换为等效的.on（）调用无论什么原因，以下可能有效：

if(jQuery && !jQuery.fn.live) {
    jQuery.fn.live = function(evt, func) {
        $('body').on(evt, this.selector, func);
    }
}

只需在加载jQuery之后和调用live（）之前包含它。

Answer 6

.on（）适用于jQuery 1.7及更高版本。如果您使用的是旧版本，请使用：

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

Answer 7

我在我的项目中使用了'live'，但我的一位朋友建议我应该使用'on'而不是live。当我试图使用它时，我遇到了像你一样的问题。

在我的页面上，我动态创建按钮表行和许多dom。但是当我使用魔法消失时。

像孩子一样使用它的其他解决方案每次点击都会调用您的功能。但我找到了一种让它再次发生的方法，这就是解决方案。

将您的代码编写为：

function caller(){
    $('.ObjectYouWntToCall').on("click", function() {...magic...});
}

呼叫来电（）;在页面中创建对象之后。

$('<dom class="ObjectYouWntToCall">bla... bla...<dom>').appendTo("#whereeveryouwant");
caller();

通过这种方式，当不应该每次点击页面时调用你的函数。