Question

我有<ul>个<li>个，每个点击处理程序都附加在页面加载上。有一个按钮可以对这些<li>进行排序。在我的排序功能中，我已经对<li>的jQuery元素数组进行了排序，然后将它们附加到<ul>中。这样排序工作正常，但所有<li>都失去了他们的点击处理程序。我如何保存它们？

var li_array = $('ul li');
li_array.sort( custom_func );
ul.empty().append( li_array.clone(true, true) );

Answer 1

li_array.sort()不应该工作，因为li_array不是数组，而是jQuery对象（除非你使用插件）。 更新： 看来，jQuery确实提供了一种排序方法，它与数组使用的内置函数相同。这让我感到惊讶，因为我在文档中找不到任何内容。有人有更多相关信息吗？

此外，没有必要克隆元素（这意味着你没有empty列表）。如果将现有的DOM元素追加到另一个元素，jQuery会首先将其分离。

这应该有用（假设ul引用你的列表）：

var li_array = $('ul li').get(); // li_array will be an array of **DOM elements**
li_array.sort( custom_func );
$(li_array).appendTo(ul); 
// or $(li_array).appendTo('ul'); or however you reference the list

如果您将相同的点击处理程序附加到每个<li>元素，则最好使用.delegate()来使用事件委派：

$('ul').delegate('li', 'click', function() {
    // handler
});

有关委托的更多信息：

事件委派利用事实，事件是bubbling up the DOM tree。上面的代码向ul元素添加了一个click事件监听器。对于在此元素的后代上引发的每个单击事件，都将触发处理程序。现在，jQuery很聪明，它只为li元素执行处理程序（与选择器匹配的元素，作为第一个参数传递给delegate。

优势在于您不会向每个li元素添加事件处理程序，而只是向其共同祖先添加一个事件处理程序。
您还可以向列表中添加更多li元素，而无需向其添加事件侦听器。绑定到ul的事件处理程序也会捕获新添加元素的点击次数。

Answer 2

http://api.jquery.com/empty/

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

在empty

之前调用代码clone

ul.empty().append( li_array.clone(true, true) );

因此，您可以尝试下一步：

var new_li_array = li_array.clone(true, true);
ul.empty().append(new_li_array);

但是使用appendTo重新排序可能会更好。

Answer 3

将.live()用于jQuery。当li被操纵时，这将保留li的点击功能。使用

 $('ul li').live('click', function() {
    // function you want to execute
 });

Answer 4

你可以使用移动DOM元素的jquery`s appendTo function，而不会影响当前父元素（如果有的话）的任何elem被传递给appendTo（元素）的专有数据（触发器和DOM元素的任何其他属性）功能

Answer 5

James Padolsey有一个非常好的jQuery method for sorting elements

如何在保留点击处理程序的同时重新排列一组html元素？ jQuery的

5 个答案: