В очень распространенном сценарии у меня есть HTML-страница с кнопкой «Добавить», которая открывает модальное диалоговое окно (через Facebox) и просит пользователя выбрать элемент из списка, который появляется в нем.
Модальное диалоговое окно получает свой HTML-фрагмент с сервера асинхронно. Я хочу, чтобы этот фрагмент можно было повторно использовать во многих частях моего приложения, поэтому он не должен предполагать, что я использую Facebox для его загрузки. Единственное, что он должен сделать, это вызвать событие item-selected всякий раз, когда пользователь выбирает элемент в нем. Но так как фрагмент загружается асинхронно, я не могу использовать $(document).ready. То есть я не могу вызвать событие как это:
$(document).ready(function() {
$(".item").click(function() {
$(".items-modal-dialog").trigger("item-selected", this);
});
});
Кроме того, мне не очень нравится использовать класс items-modal-dialog для идентификации включающего элемента DOM.
Я придумал несколько решений для этого, и я хотел бы знать, есть ли какой-то превосходный образец, который я пропускаю, потому что я думаю, что это очень распространенная проблема.
- Поместите скрипт после всего HTML, так что я уверен, что загружен DOM сниппета (я думаю, что это плохая практика)
- Создание функции JavaScript, которая загружает фрагмент с Facebox и затем связывает события. Таким образом, я предполагаю, что я использую Facebox, а также должен создать функцию для каждого типа модального диалога, который я создаю. Единственная положительная сторона, которую я вижу в этом, - это то, что я могу программно создать
items-modal-dialog DIV, поэтому мне не нужно использовать класс для его идентификации.
- Использование jQuery live для привязки событий.
- Использование iframe и
$(document).ready.
Будем весьма благодарны за любые предложения.