使用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">

可能是胡扯，但有效