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是一个动态加载的元素。

谢谢。

当前回答

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

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

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

其他回答

我知道现在回答有点晚，但我已经为.live()方法创建了一个填充。我已经在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()之前包含它。

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

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

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

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

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

试试这个:

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

在$.on()文档中:

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

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

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

我在我的项目中使用了“live”，但我的一个朋友建议我应该使用“on”而不是live。当我试着用它的时候，我遇到了和你一样的问题。

在我的页面上，我动态创建按钮表行和许多dom东西。但当我用上魔法就消失了。

其他的解决方案就像孩子一样每次点击都调用你的函数。但我找到了一个方法让它再次发生，这就是解决方案。

编写如下代码:

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

调用调用者();在像这样在页面中创建对象之后。

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

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

推荐文章