将事件绑定到尚未创建的 DOM 元素（jquery）答案

【问题标题】：Binding events to not yet created DOM elements (jquery)将事件绑定到尚未创建的 DOM 元素（jquery）
【发布时间】：2014-01-12 15:24:00
【问题描述】：

如何将事件绑定到脚本加载时不存在的 html 元素？

我的脚本的一部分将这些添加到 DOM：

<a class="btn-remove-item" href="">link</a>

问题是我不能这样做：

$(document).ready(function(){

    $(".btn-remove-item").click(function(){
        this.parentNode.removeChild(this);
    });
});

.. 我认为是因为页面第一次加载时 DOM 元素不存在。

我应该如何将事件绑定到 myClass？

【问题讨论】：

【解决方案1】：

jQuery.live() 已被弃用。这是使用jQuery.on() 代替的公认答案：

$(document).on('click', '#btn-remove-item', function() {
    this.parentNode.removeChild(this);
});

【讨论】：

【解决方案2】：

jQuery live() function 这样做：

$("#btn-remove-item").live('click', function() {
    this.parentNode.removeChild(this);
});

【讨论】：

live已弃用，如何通过on实现？
您可以使用'on'，只需通过document 选择并使用'on' 的选择器参数来获取正确的元素。例如$(document).on( 'click', '#someThingCreatedLater', function (event) { ... do stuff ...});

【解决方案3】：

jQuery.live() 是您所需要的。

$(document).ready(function(){

    $("a.myClass").live('click', function() {
        this.parentNode.removeChild(this);
    });
});

【讨论】：

【解决方案4】：

$(document).ready(function(){
     $(".btn-remove-item").live('click', function() {
        this.parentNode.removeChild(this);
    });
});

你需要使用live。

【讨论】：