Question

我有这段代码

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

    alert('Hello');

});

现在它没有动态添加元素我如何使用像实时功能

Answer 1

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

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

    alert('Hello');

});

请注意 docs ：

中的内容

事件处理程序仅绑定到当前选定的元素;他们在您的代码调用.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');

});

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

如何用on function替换jquery live

3 个答案: