Javascript 如何重新排列一组html元素，同时保留它们的单击处理程序？jQuery

我有一个多个s，每个s的点击处理程序都被附加到页面加载上。有一个按钮可以对这些s进行排序。在我的排序功能中，我对s的jQuery元素数组进行了排序，然后将它们附加到。这样，排序工作正常，但所有的单击处理程序都会丢失。我如何保存它们

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

将.live用于jQuery。这将在操纵li时保留li的单击功能。使用

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

将.live用于jQuery。这将在操纵li时保留li的单击功能。使用

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

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

此外，不需要克隆元素，这意味着您不必清空列表。如果将现有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 

如果将相同的单击处理程序附加到每个元素，则最好使用事件委派，使用：

有关委派的更多信息：

事件委派利用了这样一个事实，即事件是独立的。上面的代码向ul元素添加了一个click事件监听器。对于在该元素的子体上引发的每个单击事件，都将触发处理程序。现在，jQuery是智能的，它只对与选择器匹配的li元素执行处理程序，并作为第一个参数传递给delegate

其优点是，您不需要将事件处理程序添加到每个li元素，只需将一个事件处理程序添加到它们的共同祖先。 您还可以向列表中添加更多li元素，而无需向其添加事件侦听器。绑定到ul的事件处理程序还将捕获对新添加元素的单击。

li\u array.sort不应工作，因为li\u array不是数组，而是jQuery对象，除非您使用插件。更新：看来jQuery确实提供了一种排序方法，它与数组使用的内置函数相同。这让我有点吃惊，因为我在文档中找不到任何东西。有人有更多的信息吗

此外，不需要克隆元素，这意味着您不必清空列表。如果将现有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 

如果将相同的单击处理程序附加到每个元素，则最好使用事件委派，使用：

有关委派的更多信息：

事件委派利用了这样一个事实，即事件是独立的。上面的代码向ul元素添加了一个click事件监听器。对于在该元素的子体上引发的每个单击事件，都将触发处理程序。现在，jQuery是智能的，它只对与选择器匹配的li元素执行处理程序，并作为第一个参数传递给delegate

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

您可以使用which移动DOM元素，而不影响专有数据触发器和DOM元素的任何其他属性，从当前父元素（如果有的话）到传递给appendToelement函数的任何元素元素，而不影响专有的datatriggers和DOM元素的任何其他属性，这些属性来自当前父元素（如果有的话）以及传递给appendToelement函数的任何元素

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

在您的代码中，在克隆之前调用empty

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

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

但用appendTo重新排序可能更好

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

在您的代码中，在克隆之前调用empty

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

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

---

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

詹姆斯·帕多尔西的回答非常好

詹姆斯·帕多尔西的回答非常好

谢谢你这么详尽的回答。这给了我一个线索，如果只有一个li，我的代码可能无法按预期工作。否则它将返回一个jQuery对象数组，其次，我应该使用appendTo，而不是创建一个克隆，然后在清空列表后进行追加。顺便说一句，我在代码上做的错误是在添加之前清空。菲利克斯，你能给我一个答案吗

---

让我了解一下委托函数？现在我正在循环每一个LI并添加单击处理程序。嗨，Felix，我只是尝试应用。排序当我只得到一个并且它以某种方式工作时，我不知道为什么，但它确实如此，从逻辑上说它不应该，因为jQuery返回一个对象，但实际上它是一个数组，只有一个条目，这个数组的第0个索引包含DOM对象，不是jQuery，而是@Umair的DOM对象：不确定你的意思。你做过$'ul li.排序吗？我刚刚测试了它，似乎jQuery真的提供了一种方法排序。我不知道，它没有记录。如果调用$，则它将始终返回jQuery对象，但它可能是一个对象集合，其行为可能类似于数组，但它不是数组。ohkay知道了，那么它将是jQuery的排序：学得好！谢谢你如此详尽的回答。这给了我一个线索，如果只有一个li，我的代码可能无法按预期工作。否则它将返回一个jQuery对象数组，其次，我应该使用appendTo，而不是创建一个克隆，然后在清空列表后进行追加。顺便说一句，我在代码中犯的错误是在添加之前清空。Felix，你能给我一些关于委托函数的见解吗？现在我正在循环每一个LI并添加单击处理程序。嗨，Felix，我只是尝试应用。排序当我只得到一个并且它以某种方式工作时，我不知道为什么，但它确实如此，从逻辑上说它不应该，因为jQuery返回一个对象，但实际上它是一个数组，只有一个条目，这个数组的第0个索引包含DOM对象，不是jQuery，而是@Umair的DOM对象：不确定你的意思。你做过$'ul li.排序吗？我刚刚测试了它，似乎jQuery真的提供了一种方法排序。我不知道，它没有记录。如果调用$，则它将始终返回jQuery对象，但它可能是一个对象集合，其行为可能类似于数组，但它不是数组。ohkay知道了，那么它将是jQuery的排序：学得好！谢谢，这正是问题所在，但Felix提供了一种更好的替代方法。谢谢：谢谢，这正是问题所在，但菲利克斯提供了一个更好的替代方法。无论如何，谢谢你：