jQuery $(this).remove()在append之后无法正常工作

Question

我有一个带有class="tags"的

元素，其中包含一个预定义的超链接。

<div class="tags">
     <a href="#">myLink</a>
</div>

我有一个函数可以在用户单击超链接时删除它。

$('.tags a').click(function() {
    $(this).remove();
    return false;
});

对于预定义的超链接，这个方法有效。 如果我在页面加载后使用jQuery添加了另一个链接

$('.tags').append('<a href="#">newLink</a>');

如何解决这个问题：点击后不会调用去除超链接的函数？

- svenkapudija

Answer 1

您需要使用live函数：

$(".tags a").live("click", function() {
    // ...
});

因为您是在初始加载后添加链接，所以标准的点击事件不会绑定到动态添加的链接上。

- kufi

---

注意，自1.7版本起，live()已经被弃用。从现在开始建议使用 on()。翻译成中文后的调用将是$(document).on('click', '.tags a', function () { /* foo */ });。 - Matt

谢谢。我应该在所有点击/类似操作上使用它，还是只在真正需要时使用？ - svenkapudija

就性能而言，请参考以下答案：https://dev59.com/flfUa4cB1Zd3GeqPG1N7我个人更喜欢使用 click 事件，只有在确实需要动态添加元素时才使用 live 事件。 - kufi

Answer 2

你的点击事件只附加到当前 DOM 元素，而不是未来元素。如果您想将此事件添加到所有元素（包括未来元素），则必须在 jQuery 中使用 live 事件。 http://jsfiddle.net/6cGvt/

- sandeep

---

注意，自1.7版本以来live()已被弃用。建议从现在开始使用on()。翻译后的调用方法为$(document).on('click', '.tags a', function () { /* foo */ });。 - Matt

是的，对于jQuery的最新版本，您必须使用ON方法。 - sandeep