Question

我有一个小代码，负责绘制新添加的评论。问题是，当我重写代码以使用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>

如何将click事件添加到将在页面加载后添加的所有未来元素？

Answer 1

变化：

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

为：

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

当动态添加元素时，要使用目标已存在于页面上的元素（在此示例中为document），然后将要附加侦听器的元素作为参数传递给{{1 }}

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

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

在文档顶部附近附加许多委托事件处理程序树会降低性能。每次事件发生时，jQuery都必须比较该类型的所有附加事件的所有选择器从事件目标到最高层的路径中的元素文献。为获得最佳性能，请在文档中附加委派事件位置尽可能接近目标元素。避免过量将.on()或document用于大型委托事件文档。

从.live（）迁移到.on（）

1 个答案: