Предпочтительный способ изменения элементов, которые еще не были созданы (помимо событий)

Есть много вопросов о привязке будущих манипуляций к несуществующим элементам , на которые все в конечном итоге отвечают ] 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 в последнее время смог творить столько магии, что я надеюсь, что это будет очевидно.

42
задан Frambot 24 September 2013 в 04:24
поделиться