JQuery on click event on Href

Question

I am appending data dynamically to my table as:

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

My table structure is:

<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 Function on #editNominHref click:

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

Problem: The method does not work on dynamically generated Edit Hrefs. Any help would be highly appreciated.

Answer 1

Use event delegation for same.

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