通过 ajax 返回的颜色框和内容答案

【问题标题】：Colorbox and Content returned via ajax通过 ajax 返回的颜色框和内容
【发布时间】：2011-01-26 02:56:38
【问题描述】：

我正在使用 jquery colorbox 在窗口中弹出用户帐户。我还有一个按钮，可以通过 ajax 将更多用户加载到页面中，但由于某种原因，加载了 ajax 的用户不会在颜色框窗口中弹出。如何让 colorbox 处理通过 ajax 返回的内容？

function loadMore(pageNo) {
    //$("#loading").html('Loading...').show();
    var url = '/search/resultsAjax';
    $.get(url, {page: pageNo}, function(response) {
        $("#results").append(response);
        //$("#loading").hide();
    });
}

$(document).ready(function() {
    var currPage = 1;
    $("a.next").click(function() {
        loadMore(++currPage);
    });

    $("a.usr").colorbox({width:"960px", height:"90%", iframe:true});
});

【问题讨论】：

标签： javascript jquery colorbox

【解决方案1】：

如果您想让它在全球范围内工作，无论内容如何加载：

$('body').on('click', 'a.usr', function() {
    $(this).colorbox({width:"960px", height:"90%", iframe:true});
});

【讨论】：

【解决方案2】：

当您在$(document).ready() 中绑定颜色框时：

$("a.usr").colorbox({width:"960px", height:"90%", iframe:true});

jQuery 将搜索页面，抓取与a.usr 匹配的所有内容，将颜色框绑定到这些项目，然后忘记所有关于a.usr 的内容。 jQuery 不会记住你对 a.usr 感兴趣，所以新的不会是 colorbox'd。

这类事情的通常解决方案是使用.live() 或.delegate()，但它们在这里不起作用，因为没有“colorbox”事件。

但是，您可以轻松地手动绑定颜色框。尝试将loadMore 更改为类似这样的内容：

function loadMore(pageNo) {
    $.get('/search/resultsAjax', { page: pageNo }, function(response) {
        var $html = $(response);
        $html.find('a.usr').colorbox({ width: '960px', height: '90%', iframe: true });
        $('#results').append($html);
    };
}

您只需将response HTML 转换为 jQuery 对象，在其中找到所有 a.usr 内容，将颜色框绑定到这些内容，然后像往常一样将新的 HTML 插入到 DOM 中。

【讨论】：

谢谢您的回复，我只是想知道，如果我先附加html然后重新绑定颜色框，会有什么不同吗？
@BugBusterX：您最终可能会将颜色框绑定到同一个元素两次，这可能会导致一些混乱和奇怪的行为。 Colorbox 可能能够处理双重绑定，但我不会依赖它。

【解决方案3】：

使用这个：

<a onclick='parent.$.colorbox({href:"schedule_delete.php?sid=<?php echo $schedule_row->schedule_id; ?>"}); return false;'>delete</a

【讨论】：