jquery - 如何用on函数替换jquery live

Question

我有这个代码

$(".myclass").on("click", function(e){

    alert('Hello');

});

现在它不适用于动态添加的元素

我如何使用像直播功能

Answer 1

要像 live 一样使用它，您必须使用"delegation"，这意味着您将处理程序附加到从一开始就存在的父元素，例如：

$(document).on('click', '.myclass', function(e){

    alert('Hello');

});

请注意文档中的内容：

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托事件来附加事件处理程序，如下所述。

此外，如果您担心性能问题，请尝试将处理程序附加到尽可能“低”的位置：

在文档树顶部附近附加许多委托事件处理程序会降低性能。每次事件发生时，jQuery 必须将该类型的所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。为了获得最佳性能，请将委托事件附加到尽可能靠近目标元素的文档位置。避免过度使用 document 或 document.body 来处理大型文档的委托事件。

Answer 2

在页面加载时附加on到 DOM 中存在的元素，并委托给.myclass，例如：-

$('#classContainer').on('click', '.myclass', function(e) {
  alert('Hello');
});

http://api.jquery.com/on/#direct-and-delegated-events

Answer 3

您需要jQuery version 1.7在代码中包含以上内容..

因为您正在动态添加委托事件所需的元素..

$("body").on("click",'.myclass', function(e){

    alert('Hello');

});

事件未附加到关联单击事件后添加的元素。这就是您需要将事件添加到父容器的原因，父容器由于事件冒泡而将事件添加到子事件中。