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

Question

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

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

单击ID为someId的元素时，调用此函数。

生成的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的元素container 。

Answer 2

您可以使用jQuery .live（）

$(".delete").live("click", function() {
  // take some action
  return false;
});

而且，如果您要调用命名函数，则可以使用以下代码。 请注意，我没有使用（）

$(".delete").live("click", this.someFunction)

Answer 3

您可以使用以下选择器：

$('a[id^=delete]').click(function() {
    var number = this.id.match(/^delete(\d+)$/)[1];
    return false;
});

Answer 4

使用live方法，并可能使用一个选择器作为$('a.delete')我假设内容是通过ajax加载的，如果没有，则可以用$('a.delete')罚款

Answer 5

我已经使用了很多。 我不知道这是否是最好的解决方案，但还是尝试一下：

您的JavaScript中有一个类似于以下的函数：

function doStuff(id)
{
    alert("doing things from ID: "+id);
}

然后使用您的href执行此操作（使用“ 26”作为示例ID）：

<a href="#" onclick="doStuff(26)" id="26">

可能是胡扯，但有效