JQuery на событии нажатия на HREF

Question

Я добавление данных динамически в мой стол, как:

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 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()); 
});