JQuery 在 Href 上点击事件

Question

我正在将数据动态附加到我的 table 中：

function myFunctionEdit()
{

var table = document.getElementById("nomiTable");
var len = table.rows.length;
var row = table.insertRow(len);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);

cell1.innerHTML = len;
cell2.innerHTML = name;
cell3.innerHTML = dob;
cell4.innerHTML = relation;
cell5.innerHTML = share;
cell6.innerHTML = "<a href = \"#\" data-toggle=\"modal\" data-target=\"#editNomiModal\" id = \"editNominHref\" name = \"editNominHref\" ><img border=\"0\" alt=\"Edit Nominee\" src=\"images/edit.png\" width=\"15\" height=\"15\"/></a>";

$('#editNomiModal').modal('hide');
return false;
}

我的table结构是：

<table id = "nomiTable" name = "nomiTable" class="table table-striped table-hover">
<thead>
<tr>
..
</tr>
</thead>
<tbody>
<tr>
..Dynamically generated columns...
<td>
<a href = "#" data-toggle="modal" data-target="#editNomiModal" id = "editNominHref" name = "editNominHref" >
<img border="0" alt="Edit Nominee" src="images/edit.png" width="15" height="15"/>
</a>
</td>
</tr>

JQuery #editNominHref 上的函数点击：

$("#editNominHref").on('click', function(e) 
{
alert($(this).closest('tr').index());
});

问题： 该方法不适用于动态生成的 Edit Hrefs。任何帮助将不胜感激。

Answer 1

同样使用event delegation。

$(document).on('click', '#editNominHref', function(e) 
{
    alert($(this).closest('tr').index());
});