如何将新页面加载到当前的jQuery colorbox中？

Question

我在将页面加载到已存在的colorbox中时遇到了一些问题。

我有开了一个颜色框单击由下面的代码绑定的链接：

$("a.ajaxAddPage").colorbox({ 
    onComplete: function(){ 
     $('ul#addPage li a').click(function() { 
      $.colorbox({href: $(this).attr('href')}); 

      return false; 
     }); 
    } 
}); 

以下HTML通过AJAX加载到颜色框：

<div class='colorboxWindow'> 
    <ul id='addPage'> 
     <li><a href='addCat.php'>Add Category</a></li> 
     <li><a href='addPage.php' class='current'>Add New Page</a></li> 
     <li><a href='addPage2.php'>Add Another Page</a></li> 
    </ul> 

    <h3>Add New Page...</h3> 
</div> 

我想当他们被点击时，这3个链接中的每一个都会在当前的颜色框中打开。使用上面的onComplete绑定，这适用于第一次点击，但下一次点击只是像普通页面一样打开。

如果我在上面的代码中向$.fn.colorbox()调用添加另一个onComplete，那么第二次点击也会加载到同一个colorbox中，但第三次不会。

有没有办法将所有将来的点击绑定到同一个colorbox中打开？我还不太了解事件绑定。

如果您需要澄清，请询问。

Answer 1

如何使用jQuery .live()方法？它应该处理添加的新元素并将事件处理程序附加到新元素。 。

在这种情况下，我们把它应用到#cboxLoadedContent元素，因为这就是从AJAX的新元素调用应该进来它看起来是这样的：

$("a.ajaxAddPage").colorbox(); 

$('#cboxLoadedContent a').live('click', function() { 
    $.colorbox({href: $(this).attr('href')}); 
    return false; 
});