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

Question

如何为在脚本加载时不存在的HTML元素绑定事件？

我的脚本的其中一部分会将它们添加到DOM中：

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

问题在于我不能只这样做：

$(document).ready(function(){

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

我认为这是因为当页面首次加载时DOM元素并不存在。

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

- Ben G

Answer 1

jQuery.live()已经被弃用。下面是使用jQuery.on()的接受答案：

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

- circuitry

---

谢谢，多亏了这个，我可以在我的Angular生成的元素上绑定事件。 - Dorian

Answer 2

jQuery的live()函数可以实现以下功能：

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

- You

---

"live已被弃用，我如何通过on实现它？" - Juzer Ali

你可以使用'on'，只需通过document选择器参数来获取正确的元素。例如：$(document).on('click', '#someThingCreatedLater', function(event) { ... do stuff ...}); - tehfoo

Answer 3

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

$(document).ready(function(){

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

试一下: http://jsfiddle.net/mwR8g/

- Bertrand Marron

---

live()现在已经被弃用，请使用on()。请参考此答案：https://dev59.com/z2sy5IYBdhLWcg3w-i7h#8191450 - w3bshark

Answer 4

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

你需要使用实时。

- Ashisha Nautiyal