Menu
I have this loop creating several divs with elements in it. I want to be able to attach a click event to every link with the "linky" class, and this link would read the contentID attribute.
I've searching forever, find cases to use selectors in dynamic created elements but just can't apply to my case. Any tips?
for (i = 0; i < msg.length; i++) {
var htmlCode = "<a href='/Controller/Details/" + msg[i].ID + "' style = 'float: left;'><img class='packageImage' border='0' src='" + msg[i].Size0Path + "' /></a>";
htmlCode += "<span style='float: left;margin: 5px 0px 0px 10px;'>" + "<b>" + msg[i].TheName + "</b><br>";
if (msg[i].IsPaused == true) {
htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Resume</a>";
} else {
htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Pause</a>";
}
htmlCode += "</span>";
htmlCode += "<div class='clear'></div>";
$("#divContent").append(htmlCode);
}
Given the answers, I'm trying to attach the event to class linky, but I just not sure where, see more details below, my instructions are creating the dynamic Elements from the result of ajax submit(post).
success: function (msg) {
$("body").on("click", "a.linky", function () {
alert($(this).attr("contentID"));
});
for (i = 0; i < msg.length; i++) {
var htmlCode = "<a href='/Controller/Details/" + msg[i].ID + "' style = 'float: left;'><img class='packageImage' border='0' src='" + msg[i].Size0Path + "' /></a>";
htmlCode += "<span style='float: left;margin: 5px 0px 0px 10px;'>" + "<b>" + msg[i].TheName + "</b><br>";
if (msg[i].IsPaused == true) {
htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Resume</a>";
} else {
htmlCode += "<a href='#bar' class=linky contentID='" + msg[i].ID + "'>Pause</a>";
}
htmlCode += "</span>";
htmlCode += "<div class='clear'></div>";
$("#divContent").append(htmlCode);
}
}
485
Use the delegated form of on:
$("body").on("click", "a.linky", function() {
alert($(this).attr("contentID"));
});
You only need to do this once, before creating any dynamic content. It will attach an event handler to <body> that will respond to any of its descendants that satisfy the a.linky selector being clicked. It does not matter if these elements are already in the DOM at the moment you attach the handler or if they get added later.
179
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
