且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

通过Ajax返回的Colorbox和内容

更新时间:2023-12-05 08:21:46

当您将$(document).ready()中的colorbox与此绑定时:

When you bind colorbox in $(document).ready() with this:

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

jQuery将搜索整个页面,获取与a.usr匹配的所有内容,将colorbox绑定到这些项目,然后忘记有关a.usr的所有内容. jQuery不会记住您对a.usr感兴趣,因此不会对新内容进行色箱包装.

jQuery will go search through the page, grab everything that matches a.usr, bind colorbox to those items, and then forget all about a.usr. jQuery won't remember that you're interested in a.usr so the new ones won't be colorbox'd.

对于这种情况,通常的解决方案是使用.live().delegate(),但是由于没有"colorbox"事件,因此它们在这里不起作用.

The usual solution to this sort of thing is to use .live() or .delegate() but those won't work here as there isn't a "colorbox" event.

但是,您可以轻松地手动绑定colorbox.尝试将loadMore更改为类似以下内容:

However, you can bind colorbox by hand easily enough. Try change loadMore to something more like this:

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.

You just turn the response HTML into a jQuery object, find all the a.usr things inside it, bind colorbox to those, and then insert the new HTML into the DOM as usual.