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）。请注意，方法名称很长且详细，您可以更改它并将方法放在任何您想要的位置。我只是为了说明目的而把它弄得很冗长。

对AJAX添加的元素执行操作

1 个答案: