对 AJAX 添加的元素执行操作

Question

我有一个带有灯箱的页面，使用灯箱插件。我想要变成灯箱的元素只需选择并更改如下：

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

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

我知道这不是最干净的方法，但它目前有效。我真正的问题是，如何在 AJAX 添加到页面的元素上运行 $(".lightbox").fancybox(...) ？我可以将 .fancybox() 内容放在 AJAX 调用的 success: 部分中，但我正在寻找一种更干净的“即发即忘”解决方案；我可以编写一段适用于所有未来元素的代码。 .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 后触发某些功能。

或者

您还可以围绕innerHTML创建一个包装器来为您完成这项工作：

2.

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

    domElement.html(html);

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

您可以调用addHtmlToDomWithLightbox在所有成功函数中（而不是通过 jQuery html 方法添加 html）。请注意，方法名称又长又冗长，您可以更改它并将方法放置在您想要的任何位置。我只是出于说明目的而将其变得冗长。