Question

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

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

当点击标识为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()非常相似，但在我看来，语法更好，性能略有提升。

请注意，此示例假定您的链接全部包含在标识为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">

这可能是废话，但它有效

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

5 个答案: