新插入的元素,Colorbox不附加到正确的事件

问题描述:

我有一个表,我想动态地添加一行。这部分工作正常,我正在使用jQuery插入新行。问题是,该行包含连接到Colorbox弹出窗口的两个“编辑”和“删除”链接。现有的行对Colorbox可以正常工作,但新行将两个链接附加到“新用户”Colorbox,而不是根据需要选择“编辑”或“删除”弹出窗口。新插入的元素,Colorbox不附加到正确的事件

另一个奇怪的行为是,一旦你点击任何一个旧的链接,链接就被正确地连接了。步骤重新创建:

  1. 点击“新增人物”
  2. 点击“添加”
  3. 点击“编辑”,为新行 - 它 显示添加新用户颜色框
  4. 点击“编辑”的 现有行
  5. 现在点击“编辑”新行之一 - 它正确地显示在编辑颜色框

我试图在http://pastebin.com/i8n3t2Yt上创建最简单的测试用例。如果你想在你的本地机器上运行它,你必须在http://colorpowered.com/colorbox/下载Colorbox JS。

由于我使用.clone()创建新行,因此它不克隆附加事件。克隆有一个可选参数.clone([withDataAndEvents]),我相信此前默认为true,但在1.6中更改。我认为,因为Colorbox使用.live()附加事件,所以我不需要为[withDataAndEvents]指定true,但显然我确实需要。

听起来像将事件附加到前一行的代码没有被执行到后来新创建的代码。您需要显式重新运行代码,或者将回调附加到添加新行时通知的事件。

[编辑看代码]

好,我刚刚审核了您的代码,它肯定是这样的。你正在使用'ready'方法,只运行一次,然后就是这样 - 它不会在此后再次触发。所以任何新节点都没有附加回调。

+0

当你说我正在使用'ready'方法时,我不确定你的意思。你的意思是(document).ready函数吗?当然,它只执行一次,但它通过$()。colorbox函数隐式附加事件,它本身使用.live()方法附加事件处理程序。 .live()方法应该适用于所有新创建的元素。 – 2011-05-25 22:59:57

+0

是的,我参考(文档).ready。它将回调函数附加到已经存在的对象的事件处理程序上,但不会为那些不存在的对象进行配置。如果您将由(document).ready执行的代码解压缩到一个也可作为回调调用的方法中,那么当您添加一个新节点时,该代码将起作用。让我知道你是如何得到的 – 2011-05-26 14:35:01

+0

正如我所提到的,$()。colorbox函数使用.live()方法来附加事件,所以理论上它应该附加到未来的元素上。 Colorbox中没有公共方法来重新附加事件,因为使用.live()应该排除任何需要。 此外,您可以清楚地看到链接被连接到一个事件,它恰好是错误的事件。 – 2011-05-26 23:04:31