Автоматическая инициализация плагинов.
 

На странице есть множество динамически подгружаемых областей(то есть html блоки подгружаются с помощью ajax-а и вставляются в DOM). В этих блоках находятся куча разных элементов-плагинов, которые нужно инициализировать, например, находятся стандартные селекты, которые подменяются плагином, стилизующим их. Так вот, есетственно для одного селекта я могу вызывать иницилазиацию после вставки html-я в DOM, но что делать, если плагинов может быть куча и совершенно разных? То есть можно ли как-то сделать:
1) чтобы само отслеживалось, что в DOM были внесены изменения.
2) само определяло какие плагины есть и эти плагины инициализировались? Уверен, что такой механизм должен быть, кто-нибудь да уже придумал.
Заранее благодарю.

Добрый день,

Есть событие DOMNodeInserted. Это чтобы отслеживать изменения в DOM и что либо делать. Но мне кажется тут проще будет реализовать callback для каждого плагина, по завершению ajax. Это если я правильно Вас понял.

Можете подробнее объяснить, что значит "например, находятся стандартные селекты(<select>?), которые подменяются плагином, стилизующим их"?

Например, загрузилась страница. Далее идет ajax запрос, которым подставляется верстка на страницу, скажем, в шапку сайта. В этой верстке, пришедшее в ajax ответе, находятся стандартные теги select, которые нужно заменить дивами, используя инициализацию плагина. А также есть, например, галлерея слайдов, которая тоже должна быть проинициализирована, чтобы она заработала.

Приведу свою реализацию, возможно не лучшее решение, но работает вполне нормально.

Я тоже в свое время озадачился таким вопросом, т.к. активно использую Ajax-ссылки, и разные UI плагины. В общей архитектуре используется технология MVC, и есть представления (Veiw-файлы) в которых собирается HTML. Так вот, в этот html я встраиваю специальные теги в которых указываю ту функцию которую нужно запустить, при желании ей можно передать пременные (селекторы, id и т.д.). После удачной подгрузки по Ajax, запускается функция, которая ищет такие теги и запускает функции инициализации в соответственно.

Пример:

скрытый тег на странице, который указывает, что именно запустить

<input class="initJS" type="hidden" value="initEditor();" />

После подгрузки страницы $.ajax запускается функиция, которая ищет на странице, что ей нужно запустить

$('input.initJS').each(function (index, element) {
        var fun = $(element).val();
        eval(fun);
    });
}