Colorbox和Content通过ajax返回

我正在使用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

当你在$(document).ready()绑定colorbox时：

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

jQuery将搜索整个页面，获取与a.usr匹配的所有内容，将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 2

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

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

Answer 3

用这个：

 delete