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

I'm having a bit of trouble loading pages into an already-existing colorbox.

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

I have a colorbox opened by clicked a link that is bound by the following code:

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

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

            return false;
        });
    }
});

The following HTML is loaded into that colorbox via AJAX:

以下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>

I'm trying to have each of those 3 links open in the current colorbox when they are clicked. With my onComplete binding above, this works for the first click, but the next click just opens like a normal page.

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

If I add another onComplete to the $.fn.colorbox() call in the above code, then the 2nd click will also load in the same colorbox, but the 3rd will not.

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

Is there a way to just bind all future clicks to open in the same colorbox? I don't know much about event binding yet.

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

If you need clarification, please ask.

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

1 个解决方案

#1

How about using jQuery .live() method? It should handle new elements being added and attach the event handler to the new elements.

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

In this case, we apply it to the #cboxLoadedContent element because that's where the new elements from AJAX calls should come in. It looks something like this:

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

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

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

#1