Есть много вопросов о привязке будущих манипуляций к несуществующим элементам , на которые все в конечном итоге отвечают ] live / delegate . Мне интересно, как запустить произвольный обратный вызов (чтобы добавить класс или запустить плагин, например) с до все существующие элементы, которые соответствуют селектору, и все будущие элементы, которые соответствуют тому же селектору , которые еще предстоит создать.
Похоже, что основная функциональность плагина livequery сделана это в ядро, но другая часть, присоединение произвольных обратных вызовов, каким-то образом потерялась.
Другой распространенный ответ - делегирование событий , но что, если у вас нет доступа ко всему коду поставщика, который создает элементы, чтобы он запускал события?
Вот некоторый реальный код:
// with livequery
$('input[type=text], input[type=password], textarea, .basic_form .block select, .order_form .form_item select, .order_form .form_item input')
.livequery(function(){
$(this)
.focus(function(){
$(this).addClass('active');
})
.blur(function(){
$(this).removeClass('active');
})
.addClass('text');
});
// with live
$('input[type=text], input[type=password], textarea, .basic_form .block select, .order_form .form_item select, .order_form .form_item input')
.live('focus', function(){
$(this).addClass('active');
})
.live('blur', function(){
$(this).removeClass('active');
});
// now how to add the class to future elements?
// (or apply another plugin or whatever arbitrary non-event thing)
Один из подходов - отслеживать, когда новые узлы добавляются / удаляются, и повторно запускать наши селекторы . Благодаря @arnorhs мы знаем о событии DOMNodeInserted , что я бы проигнорировал проблемы кроссбраузерности в надежде, что эти небольшие патчи IE когда-нибудь попадут в восходящий поток к jQuery или зная, что функции jQuery DOM могут быть обернуты.
Даже если бы мы могли гарантировать, что DOMNodeInserted запускает кроссбраузерность, однако , было бы нелепо привязать к нему несколько селекторов. Сотни элементов могут быть созданы в любое время, и выполнение потенциально десятков вызовов селектора для каждого из этих элементов будет сканироваться.
Может быть, лучше отслеживать DOMNodeInserted / Deleted и / или перехватить в процедуры манипулирования DOM jQuery, чтобы установить только флаг, который должен произойти "повторной инициализации"? Тогда может быть просто таймер, который проверяет этот флаг каждые x секунд, выполняя все эти селекторы / обратные вызовы только тогда, когда DOM действительно изменился.
Это все равно может быть очень плохо, если вы добавляете / удаляете элементы в большом количестве с большой скоростью (например, с анимацией или ____). Необходимость повторного синтаксического анализа DOM один раз для каждого сохраненного селектора каждые x секунд может быть слишком интенсивной, если x низкий, и интерфейс будет казаться вялым, если x высокий.
Я добавлю щедрость, когда это позволяет мне. Я добавил награду за самое новое решение!
По сути, я имею в виду более аспектно-ориентированный подход к манипулированию DOM. Тот, который может разрешить создание новых элементов в будущем , и они должны быть созданы с первоначальными изменениями document.ready, примененными к ним также .
JS в последнее время смог творить столько магии, что я надеюсь, что это будет очевидно.