javascript - 如何将新页面加载到当前的jQuery颜色框中？

将页面加载到已经存在的颜色框中时遇到了一些麻烦。

通过单击受以下代码绑定(bind)的链接，我打开了一个颜色框:

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

            return false;
        });
    }
});

通过AJAX将以下HTML加载到该颜色框中:

<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绑定(bind)，该功能适用​​于第一次单击，但是下次单击就像打开普通页面一样。

如果我在上述代码中的onComplete调用中添加了另一个$.fn.colorbox()，则第二次单击也将加载到相同的颜色框中，但是第三次​​单击将不会加载。

有没有一种方法可以将所有将来的点击绑定(bind)到同一色箱中以打开？我对事件绑定(bind)了解不多。

如果需要澄清，请询问。

最佳答案

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

在这种情况下，我们将其应用于#cboxLoadedContent元素，因为这是AJAX调用中的新元素应进入的位置。它看起来像这样:

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

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