-1

我有一个小代码，负责绘制新添加的注释。问题是，当我重写代码以使用on而不是删除live时，我的代码不适用于页面加载后添加的新元素

这是我的代码

$(function(){
    $('.show-comment-form').on("click", (function(){
        dataattr = $(this).data('comment');
        $('#new_comment').remove();
        $('.message-'+dataattr).append(partial_form);
        $("#comment_parent_id").val(dataattr);
        return false;
    }))
})

HTML

<a href="/phrases/52/create_comment?parent_id=16" class="show-comment-form" data-comment="16">Reply</a>

如何将点击事件添加到所有未来元素，这些元素将在页面加载后添加？

4

1 回答 1

7

改变：

$('.show-comment-form').on("click", (function(){

到：

$(document).on("click", '.show-comment-form', (function(){

动态添加元素时，要使用页面上已经存在的元素，在此示例document中，然后将要附加侦听器的元素作为参数传递给.on().

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

另请注意，您希望将元素定位为尽可能接近动态插入的元素：

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

于 2013-05-15T13:44:15.800 回答