如何在使用jQuery单击动态生成的链接时调用函数？

Question

我<a href="#"></a>动态创建了多个元素.该id属性也是动态分配的.喜欢<a href="#" id='delete"+id+"'></a>.ID将变得像delete01, delete02, ...我想在单击这些元素中的任何一个时调用函数.我只知道,

$("#someId").click(this.someFunction()); 

当someId单击带有ID的元素时,调用该函数.

生成的HTML看起来像,

<a id="delete26" href="#" class="delete">Delete</a>
<a id="delete27" href="#" class="delete">Delete</a>
<a id="delete28" href="#" class="delete">Delete</a>

生成上述html的JavaScript代码如下所示,

html += "<a class='delete' href='#' id='delete"+post.id+"'>Delete</a>";

在这里,我的ID是动态生成的.那么,当点击任何一个元素时,我该如何调用一个函数.

有什么建议!!!

谢谢!

Answer 1

最好的方法是使用.delegate().此函数使用称为"事件冒泡"的Javascript功能,这意味着每次在元素上触发事件(例如单击,焦点,模糊,鼠标悬停)时,它也会在所有元素的父元素上触发.因此,您可以使用共同的祖先元素来捕获所有事件.这样做的好处是您可以为尚不存在的事件添加处理程序.

jQuery为您自动化了很多这样的事情:

$('#container').delegate('a.delete', 'click', this.someFunction);

这非常相似live(),但在我看来,语法更好,性能略有提升.

请注意,此示例假定您的链接全部包含在具有id的元素中container.