追加元素并删除它会破坏jquery中的所有事件处理程序？

Question

好我创建元素,分配点击处理程序,并将其附加到正文.然后我删除它并重新加载它并单击处理程序不再工作???

为什么会这样呢？

var btn = $('<button>').text('hi').click(function(){console.log(3);});
var div = $('<div>');
div.append(btn);
$('body').append(div);
//click it now, it works..
div.html('');
div.append(btn);
// now button doesn't work..

那么为什么会发生这种情况,我该怎么做才能解决它.

Answer 1

由于.html('')基本相同.empty(),以下适用(来自jQuery文档):

为了避免内存泄漏,jQuery在删除元素本身之前从子元素中删除了其他构造,如数据和事件处理程序.

如果要删除元素而不破坏其数据或事件处理程序(以便以后可以重新添加),请.detach()改用.

一种选择是使用事件委托.在这样做时,事件不直接绑定到button元素,它绑定到未删除的常量父元素.

这里的例子

$(document).on('click', 'button', function () {
    // ..
});

如上所述,另一种选择是使用该.detach()方法从DOM中删除元素,而不删除附加的事件侦听器.

该.detach()方法是一样的.remove(),不同之处在于.detach()保持与删除的元素相关联的所有的jQuery的数据.当删除的元素稍后要重新插入DOM时,此方法很有用.

这里的例子

div.find('button').detach();
div.append(btn);