Как переставить набор HTML-элементов, сохранив их обработчики кликов? JQuery

Question

У меня есть <ul> с числом <li> с, каждый из которых имеет свой обработчик кликов, прикрепленный при загрузке страницы.Есть кнопка для сортировки этих <li> с.В моей функции сортировки я отсортировал массив элементов jQuery <li> s, а затем добавил их в <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
}); 

Подробнее о делегате:1025 *

Делегирование событий использует тот факт, что события всплывают в DOM-дереве .Приведенный выше код добавляет прослушиватель события click к элементу ul.Обработчик будет запускаться для каждого события щелчка, которое вызывается у потомков этого элемента.Теперь 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

Джеймс Падолси имеет действительно хороший метод jQuery для сортировки элементов

Answer 4

вы можете использовать функцию appendTo jquery , которая перемещает элемент DOM, не затрагивая проприетарные данные (триггеры и любые другие свойства элемента DOM) из текущего родителя (если есть) в любой передаваемый элемент к функции appendTo (элемент)

Answer 5

Используйте .live() для jQuery.Это сохранит функцию щелчка li при манипуляциях с li.Для использования

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