Блог

У меня есть страница с лайтбоксом на ней, с использованием плагина lightbox. Элементы, которые я хочу превратить в лайтбокс, просто выбираются и изменяются следующим образом:

$(".lightbox").find("a").live ("щелчок", функция (e)
{ 
 e.preventDefault();

 $(".lightbox").find("a").fancybox({
 'transitionIn': 'эластичный', 
 'transitionOut': 'эластичный'
 });
});

Я знаю, что это не самый чистый способ, но пока он работает. Мой реальный вопрос в том, как я могу выполнить $(".lightbox").fancybox(...) над элементами, добавленными на страницу AJAX? Я мог бы поместить .fancybox() материал внутрь success: части вызова AJAX, но я ищу более чистое решение «запустить и забыть»; я могу написать один фрагмент кода, который применим ко всем будущим элементам. .live() здесь идеально, если не считать того факта, что вы должны привязать его к событию. Я предполагаю, что даже здесь есть create , которого не существует.

Итак, как я могу запустить функцию для элементов, добавленных на страницу AJAX сейчас или в будущем, без необходимости разбрасывать множество фрагментов кода повсюду?

Спасибо,

Джеймс

Просто добавьте еще один уровень абстракции над вашим вызовом jQuery ajax. Этот слой выполнит для вас вызов ajax и просканирует ваш результат, добавив лайтбокс по мере необходимости. Вот что я имею в виду:

1.

 function lightBoxAjaxRequest(requestObj) {
    if (requestObj.success) {
        var requestObjCopy = $.clone(requestObj);  // clone request object

        requestObjCopy.success = function add$lightbox$to$response(html) {
             // Add "html" to the page...
             // Call lightbox code here, on newly added HTML
             requestObj.success(html); // Trigger original success handler
        };

        $.ajax(requestObjCopy);
    }
    else {
        $.ajax(requestObj);
    }
};
  

Может быть, что-то вроде этого? Хотя я не знаю, насколько хорошо это сработает на практике. Кажется, что вы хотите всегда запускать какую-то функцию после того, как что-то было добавлено в DOM.

В качестве альтернативы

Вы также можете создать оболочку вокруг innerHTML , которая выполнит всю работу за вас:

2.

 function addHtmlToDomWithLightbox(domElement, html) {
    if (typeof domElement === "string") {
        domElement = $("#"   domElement);
    }

    domElement.html(html);

    // Add lightbox here
    domElement.find("a").fancyBox({});
};
  

Вы бы вызывали addHtmlToDomWithLightbox все свои функции успеха (вместо добавления html с помощью метода jQuery html ). Обратите внимание, что название метода длинное и подробное, вы можете изменить его и разместить метод где угодно. Я просто сделал это подробным в иллюстративных целях.