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

Question

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

我点击了一个由以下代码绑定的链接打开了一个颜色框:

$("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上面的绑定,这适用于第一次单击,但下一次单击就像普通页面一样打开.

如果我添加其他onComplete的$.fn.colorbox()在上面的代码调用,那么第2点击也将加载在同一颜色框,但第3不会.

有没有办法将所有未来的点击绑定在同一个颜色框中打开？我对事件绑定还不太了解.

如果您需要澄清,请询问.

Answer 1

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

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

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

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