Выполнить действие над элементами, добавленными AJAX

Question

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

$(".lightbox").find("a").live('click', function(e)
{
    e.preventDefault();

    $(".lightbox").find("a").fancybox({
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
    });
});

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

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

Спасибо

Джеймс

Answer 1

Просто добавьте еще один уровень абстракции над вызовом 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.


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

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