Question

$(function () {
    loadFiles('Reports');
    var colorboxOptions = GetColorboxOptions();
    colorboxOptions.onOpen = onViewFileClicked;
    $("a.link_file").colorbox(colorboxOptions);

});

我需要使用ajax调用loadFiles('Reports')填充空div。但是，如何将colorbox添加到新创建的<a>代码中？上面的代码永远不会有效。看来colorbox无法找到a.link_file之后创建的所有$(document).ready()代码。有人能给我一个帮助吗？谢谢。

--- ---更新

loadFiles正在使用jTemplate

function loadFiles(folder) {
$.ajax({
    url: '/Api/Files/' + folder,
    type: "GET",
    contentType: "application/json; charset=utf-8",
    success: function (result) {
        console.log(result);
        $('#Container').setTemplateURL("/Templates/FileList.htm", null, { filter_data: false });
        $('#Container').processTemplate(result);
    }
});

}

它的作用是生成Html代码以填充名为<div>的{{1}}。

Answer 1

如果你的loadFiles函数正在调度一个ajax调用，那么可能发生的是它正在产生一个新线程来处理抓取数据并继续执行其余的函数。当你想在ajax调用完成后发生某些事情时，你需要在ajax调用中的“success：”函数中放置你想要发生的事情。否则，您无法保证按照您想要的顺序发生事情。

如果你可以编辑loadFiles函数，只需输入

即可

var colorboxOptions = GetColorboxOptions();
colorboxOptions.onOpen = onViewFileClicked;
$("a.link_file").colorbox(colorboxOptions);

在ajax调用的成功函数中。

或者，您可以添加

async: false,

到您的Ajax调用。我个人不推荐这条路线，因为它可能会导致其他错误，但如果你将这个功能用于多个事情，这可能是你最好的选择。

Answer 2

$(function () {
    loadFiles('Reports');
});

function loadFiles(folder) {
$.ajax({
    url: '/Api/Files/' + folder,
    type: "GET",
    contentType: "application/json; charset=utf-8",
    success: function (result) {
        console.log(result);
        $('#Container').setTemplateURL("/Templates/FileList.htm", null, { filter_data: false });
        $('#Container').processTemplate(result);

        var colorboxOptions = GetColorboxOptions();
        colorboxOptions.onOpen = onViewFileClicked;
        $("a.link_file").colorbox(colorboxOptions);
    }
});

我没有做出承诺，但我猜你的colorBox代码需要在ajax调用返回后运行，尝试将其置于成功回调中，如上所述。

如何在新添加的DOM项目上应用colorbox？

2 个答案: