Adding click handlers in a loop
Hello, this is my first post, I tried searching for a similar post but couldn't so I would really appreaciate it if someone had the time to help me out.
What I'm trying to achieve is build a table programmatically using DOM like so:
-
var Html = [];
Html.push('<table> ..... ')
.....
Html.push('</table>')
Inside the table I'm adding <tr> rows using a for loop like so:
-
for (var index = 0; index < length; index++)
{
Html.push('<tr><td>......</td></tr>');
......
}
And inside each table cell <td> I'm adding an anchor like so:
-
Html.push('<a href="javascript:void(0)" id="');
Html.push(index);
Html.push('">');
Html.push("Click HERE");
dayViewHtml.push('</a>');
I want to add a JQuery click handler to every anchor inside the for loop like so:
-
jQuery('#' + index).click(function() {
alert("You clicked on" + index); });
But the problem is that the click handler doesn't care if it's inside a loop and only executes once. I tried using the "bind" JQuery method to bind a click handler to each anchor inside the loop but also couldn't get the code to work.
I would really appreciate it if someone helped me out given the code above. Thanx alot for your time...