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

Question

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

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

$("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 绑定(bind)，这对第一次点击有效，但下一次点击就像正常页面一样打开。

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

有没有办法将所有 future 的点击绑定(bind)到同一个颜色框中打开？我还不太了解事件绑定(bind)。

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

Answer 1

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

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

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

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