我在将页面加载到已存在的颜色框中时遇到了一些麻烦。
我点击了一个由以下代码绑定的链接打开了一个颜色框:
$("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()
,那么第二次点击也会加载到同一个颜色框中,但第三次点击也不会。
有没有办法将所有未来的点击绑定到同一个颜色框中打开?我对事件绑定还不太了解。
如果您需要澄清,请询问。
答案 0 :(得分:5)
如何使用jQuery .live()方法?它应该处理添加的新元素并将事件处理程序附加到新元素。
在这种情况下,我们将它应用于#cboxLoadedContent
元素,因为这是来自AJAX调用的新元素应该进入的位置。它看起来像这样:
$("a.ajaxAddPage").colorbox();
$('#cboxLoadedContent a').live('click', function() {
$.colorbox({href: $(this).attr('href')});
return false;
});