Why Does My Js Function Not Work After Dynamically Adding Content To The Page?

I have a javascript function that is defined in the beginning of my webpage. It is called when a row is clicked in my table. here is my function: $('.info').click(function(){

Solution 1:

You are adding the element dynamically so it is not registered when you set the click handler.

$("body").on("click", ".info", function(e) {
   ...
});

body usually works but ideally you'd want a DOM element as close to your selector .info as possible.

Solution 2:

Use j Query ready event

$(document).ready(function() {    
    $(".info").on("click", "tr", function(event){
       alert($(this).attr('movieid'));
   });
});

Solution 3:

You have to do this:

$("body").on("click", "tr", function(event){
    alert($(this).attr('movieid'));
});

By adding a "container", it will have an effect like .live().

Solution 4:

Add .on on document because you are adding DOM to document.

Example

$(document).on('click',".info",function(){
       alert($(this).attr('movieid'));
});

Solution 5:

You php script is most likely not adding the class to the table row. Alter it to add that class.