Colorbox和Content通过ajax返回

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()用这个绑定colorbox时:

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

jQuery将搜索整个页面,抓取匹配的所有内容a.usr,将colorbox绑定到这些项目,然后忘掉所有内容a.usr.jQuery不会记得你对它感兴趣a.usr所以新的不会是彩盒.

这种事情的通常解决方案是使用.live()或.delegate()但由于没有"彩盒"事件,这些将不起作用.

但是,您可以轻松地手动绑定彩盒.尝试更改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);
    };
}

您只需将responseHTML转换为jQuery对象,查找其中的所有a.usr内容,将colorbox绑定到那些,然后照常将新HTML插入DOM.