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

我使用jquery colorbox在窗口中弹出用户帐户。我也有一个按钮，通过ajax将更多的用户加载到页面中，但由于某些原因，用户加载ajax的用户不会在colorbox窗口中弹出。我怎样才能让colorbox与通过ajax返回的内容一起工作？通过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}); 
});

来源

2011-01-26 BugBusterX

当您在$(document).ready()绑定颜色框与此：

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

jQuery将经过网页搜索，抓取匹配a.usr一切，结合颜色框这些项目，然后忘记所有关于a.usr。 jQuery不会记得你对a.usr感兴趣，所以新的不会是colorbox'd。

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

但是，您可以轻松地用手绑定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作为通常。

来源

2011-01-26 04:08:03

感谢您的回应，我只是想知道，会有任何区别，如果我先附加html，然后重新绑定colorbox？ – BugBusterX 2011-01-26 21:22:22

使用此：

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

来源

2011-03-02 10:28:14 Shankan

如果你想让它在全球开展工作，不管内容如何加载：

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

来源

2012-03-22 23:17:25 Woahdae

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

回答

相关问题