Question

I am developing discussion panel in asp.net in which I am drawing some spans through javascripts

$("#commenttr").after("<tr id="+i+"><td class=\"labelPortion\"></td><td class=\"controlPortion\">" +out[i]+ "</td><td><span style = \"cursor:pointer\" class = \"plblAgreeComment\" id = \"" + ids[i+1] + "\"> Vote Up </span> <span style = \"cursor:pointer\" class = \"plblDisAgreeComment\" id = \"" + ids[i+1] +"\">Vote Down </span><span id = \"ptxtAgreeComment\" >"+ agrees[i+1] + " </span></td></tr>");

But when I am calling the jquery function

$(".plblAgreeComment").click(function(){
    alert("hi");
}

Its not working. Please help me.

Answer 1

Description

You need jQuery .live() or .on() method to bind events to dynamically created html.

Choose .live() or .on() depending on the version of jQuery you are using.

.live() Available since jQuery 1.3. Attach an event handler for all elements which match the current selector, now and in the future.

.on() Available since jQuery 1.7. Attach an event handler function for one or more events to the selected elements.

Sample

$(".plblAgreeComment").live('click', function(){
     alert("hi");
});

$(".plblAgreeComment").on('click', function(){
     alert("hi");
});

More Information

• jQuery.live()
• jQuery.on()

Update: jsFiddle Demonstration