Question

如何清空元素并重新使用元素并保留事件处理程序等？

<div></div>

var inp = $('<input type="text" />')
    .keydown(function(){
        alert('keydown');
    });

$('div').append(inp);
$('div').empty();
$('div').append(inp);

当你清空元素时，所有事件处理程序等都会被销毁。你怎么能避免这种情况？

Answer 1

在孩子身上使用detach：

inp.detach();

如果您有多个元素

var saved = $("div").children().detach();

来自empty的文档：

为了避免内存泄漏，jQuery删除了其他构造，如数据和删除之前来自子元素的事件处理程序元素本身。

Answer 2

尝试.detach() -

$('div input[type="text"]').detach();

Answer 3

您可以尝试使用.live()

var inp = $('<input type="text" id="myinput" />'); 

$('#myinput').live('keydown', function(){
    alert('keydown');
});

$('div').append(inp);
$('div').empty();
$('div').append(inp);

Answer 4

试试这个jsfiddle

创建inp变量时，它是一个唯一的jQuery对象。如果要多次使用它，则需要克隆它以便能够重复使用它。将true参数提供给clone()方法以获取深层副本，包括事件。

Answer 5

尝试使用jQuery.live（），它会搜索新创建的元素（而keydown只会尝试在创建keydown处理程序之前创建的元素）。

<div></div>

var inp = $('<input type="text" />');

// edit: live won't work when chaining it, so attaching separately
$("input").live('keydown', function(){
    alert('keydown');
});

$('div').append(inp);
$('div').empty();
$('div').append(inp);

有关详细信息，请参阅here。

如何清空（）元素但保留事件处理程序等？

5 个答案: