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