Question

我正在使用jquery colorbox在窗口中弹出用户帐户。我还有一个按钮，通过ajax将更多用户加载到页面中，但由于某些原因，加载了ajax的用户不会在colorbox窗口中弹出。如何让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});
});

Answer 1

如果要使其全局工作，无论内容如何加载：

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

Answer 2

将$(document).ready()中的彩色框与此对象绑定：

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

jQuery将搜索整个页面，抓取与a.usr匹配的所有内容，将颜色框绑定到这些项目，然后忘记a.usr的全部内容。 jQuery不会记得你对a.usr感兴趣所以新的不会是彩盒。

此类事情的常用解决方案是使用.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内容，将colorbox绑定到那些，然后照常将新HTML插入DOM中。

Answer 3

使用此：

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

Colorbox和Content通过ajax返回

3 个答案: