2014-10-10 42 views
1

我有一些JavaScript成功地克隆模板并将生成的html附加到div。但是,当我试图引用克隆的元素时,它不可访问,即使如果我将与模板(和克隆系统)外部完全相同的元素(使用Firebug确认)完全相同的元素进行访问,也是可访问的。我相信我需要在克隆后做一些更新,但我不确定。我试图用它来访问(克隆)元(不记录任何东西到控制台,不工作)的代码是:点击克隆的元素无法正常工作Javascript

$("#depminusbutton0").on("click", function() { 
    console.log('I triggered minus 0'); 
}); 

而且depminusbutton0显示了这样的萤火一次克隆检查元素(没有按”之前克隆牛逼存在,因为ID 0动态插入:

<a id="depminusbutton0"> 

任何想法如何,我可以让这个元素访问

+0

您是否克隆了具有相同ID的元素? – rayfranco 2014-10-10 02:27:35

+0

你怎么克隆?看到这里:http://stackoverflow.com/questions/9549643/jquery-clone-not-cloning-event-bindings-even-with-on – 2014-10-10 02:41:56

回答

1

两种可能性,我能想到的:

  1. 您是在元素存在之前安装事件处理程序,以至于无法找到将该事件处理程序附加到的元素?
  2. 您在文档的其他地方有冲突的ID。

如果你打算使用这种形式的事件处理:

$("#depminusbutton0").on("click", fn); 

然后,#depminusbutton0元素必须在你运行该代码行的时间存在。它将在您运行代码时搜索该元素的DOM,并且不会连接到与您将来创建的ID相匹配的元素。

您可以通过在创建#depminusbutton0元素后运行该代码行并将其插入到DOM中来解决该问题,也可以切换到使用将事件处理程序附加到公共父级的委托事件处理在创建子元素之前存在。

要了解更多关于如何委派事件处理工作,看到这些参考资料:

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

一般的想法是这样的:

$(some parent selector).on("click", "#depminusbutton0", fn); 

如果你有#depminusbutton0 ID的多个元素,那么你将不得不解决这个问题,只有一个元素带着那个ID。通常在使用克隆时,您想使用类名而不是id,因为您可以使用多个具有相同类名的元素。

+0

#1是答案,我有事件处理程序代码安装之前创建递增的按钮。我将该代码创建移动到按钮的创建模板中,这也减少了总代码,并且它像魅力一样工作。如果可以,我会鼓励你,但是没有足够的声望去做。 – edencorbin 2014-10-10 15:24:37

+0

@bobbydoogle - 您可以通过选中最能帮助您的答案左侧的绿色复选标记来选择“最佳答案”。这也将为您遵循这里的程序赢得一些声望点,并奖励提供答案的人。 – jfriend00 2014-10-10 15:58:28

1

您是否将事件附加到尚不存在的元素?如jQuery documentation中所述:

事件处理程序仅绑定到当前选定的元素;它们必须在代码调用.on()时存在于页面上。

只要确保在创建后将事件附加到克隆的元素上。

+0

这是问题,谢谢,如果我有更多的声望,我会喜欢。 – edencorbin 2014-10-10 15:25:01