Question

我在div元素中有一个链接。该链接有一个点击监听器。

$(document).ready(function() {
    $('#theLink').click(function() {
        // do stuff
    });
})

<div id="myElement"><a class="myLink" id="theLink">Click here</a></div>

在我的应用程序的某个时刻，我必须清除div元素的内容，然后必须在以后再次重写它们。当我使用.html（''）重写链接时，我丢失了点击监听器，但链接不起作用。

$('#myElement').html(''); // clear element

$('#myElement').html('<a class="myLink" id="theLink">Click here</a>');

我是否需要添加新的侦听器才能使此链接再次运行？

Answer 1

您可以使用.on并指定链接的容器，以便在删除并重新添加后进行监听。

修改：您可以在documentation中了解以下方法。请参阅直接和委派事件部分。

请参阅DEMO此处

下面的内容应该有效，

$('#myElement').on('click', '#theLink', function() {
  alert('HI!');
});

我认为内部jQuery做了类似下面的事情，

$('#myElement').click (function (e) {
    if (this.id == 'theLink') {
       alert('Hi!');
       e.stopPropogation();           
    }
});

Answer 2

您应该使用 jQuery's on() 功能（jQuery 1.7+）。这将允许您将click事件绑定到元素，无论您添加和删除它多少次。

例如：

$("#theLink").on("click", function(event){
    //do stuff;
});

更新：对于早于1.7的jQuery版本，请使用bind()或live()（具体取决于jQuery版本）。适用相同的语法。

Answer 3

我认为

$('#myElement').children('id!="myLink"').remove()

应删除除链接之外的容器div的所有子节点。但是，我不确定children（）中的选择器表达式是否格式正确，因此可能会导致语法错误。如果是，请发表评论，我将编辑答案。

jQuery - 添加到html（）的链接

3 个答案: