jquery后期绑定答案

【问题标题】：jquery late bindingjquery后期绑定
【发布时间】：2018-12-05 20:01:45
【问题描述】：

我有一个在页面加载时绑定点击操作的代码，它是一个链接。当我单击它时，它会发送 ajax 请求并用 jquery append() 函数替换某些 div 中的内容。这个新内容有一个链接，我需要为它们绑定一些操作，但我不能......我认为绑定不起作用，因为 jquery append 不会更新 DOM 树。我怎样才能获得后期绑定？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

有 3 个函数可以做到这一点：

$(selector).live(events, data, handler); - jQuery 1.3+ - 不推荐使用的版本：1.7，删除：1.9 (reference)
$(document).delegate(selector, events, data, handler); - jQuery 1.4.3+ - 从 jQuery 1.7 开始，.delegate() 已被 .on() 方法取代。 (reference)
$(document).on(events, selector, data, handler); - jQuery 1.7+ - 首选 (reference)

一般建议使用on()，它的使用很简单，可能是首选方式。

第一个选择器在调用函数时必须存在，不能删除，否则事件也会消失（可以是document）。
第一个参数是事件（例如“点击”）
第二个参数是要绑定事件的选择器。
最后，您可以为事件添加一些自定义数据和函数。

这里有一些示例代码：

// Make sure the DOM is ready
$(function() {
    // Bind the click event to the function
    $(document).on("click", "a.class", function(event) {
        // Put your code here.
    });
});

【讨论】：

太棒了！我想知道为什么这不起作用： $(function() { $('.class').on("click", "a", function(event) { // 把你的代码放在这里 }); } );
您正在寻找另一个类为class 的元素内的a 元素？
是的...我认为$('.class1') 将选择所有具有class1 类的元素，"a" 将从中选择锚标签，并绑定事件处理程序。没有？

【解决方案2】：

现在可以利用 jQuery 的 live() 事件进行后期绑定：

$('a.my-links-class').live('click', function() {
    // do your link action here
});

【讨论】：

这让我很开心。 live() 太棒了！
您应该使用on() 而不是live()。

【解决方案3】：

JQuery 1.9 中的方法 .live 已弃用。所以现在你可以这样做：

$("body").on("click", ".classname", function() { ... })

【讨论】：

这会在正文点击时一次又一次地添加事件侦听器吗？

【解决方案4】：

.live() 事件从 1.9 版本开始被弃用。

对于使用更高版本 Jquery 的任何人，他们都可以使用 .on() 事件，它的工作方式几乎相同。

【讨论】：

【解决方案5】：

您需要使用 jQuery 的 live 函数，它将一个事件绑定到所有匹配选择器的元素，无论它们是什么时候创建的。

【讨论】：

【解决方案6】：

您可以使用 jQuery 1.3+ 的 $().live(event, function) 函数。 $("a").live("click", myClickFunc) 将绑定 myClickFunc 就像 $("a").click(myClickFunc) 或 $("a").bind("click", myClickFunc) 一样，但事件将被绑定“实时”，因此在该函数调用之后添加到 DOM 的元素也将被绑定。您可以使用$().die() 删除实时绑定事件。有关 $().live 的更多信息，请参阅the documentation for it。

另一个选择是有一个函数来绑定给定上下文的元素（使用 $ 选择器函数很少使用的第二个参数）：

function myBindEvents(context) {
     $("a", context).click(myClickFunc);
}

并在您使用 AJAX 更新元素时调用它：

$("<div>").load("...", "...", function(){myBindEvents(this);});

希望这会有所帮助。 :)

【讨论】：

【解决方案7】：

就我而言，我使用的是 js 库，因为我有元素变量，代码就像

$(element).click(function(){
    //some action
});

但这不适用于我的后期绑定元素。所以我最终使用了core js点击事件

element.addEventListener('click', function() {
    //My some action
}, false);

【讨论】：