将内容动态添加到页面后，为什么我的JS函数不起作用？

Question

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(){
        alert($(this).attr('movieid'));
    });

here is my what my table row looks like:

<tr class="info" movieid="123"><td>movie title</td></tr>

now that table is displayed when I first load the page, I can click the row and it will call the function correctly. I am trying to implement a search function for the table. I have the php script return table rows just like the one above, I add them to the table, but when I click the row that is returned from the php script, the javascript function isn't called. Does anyone know how I can accomplish this? I've had no luck.

EDIT

here is my function to get the search results:

$.ajax({
        type: "POST",
        url: "www.mysite.com/core/search.php",
        data: { q: search_string},
        cache: false,
        success: function(html){
            $("table#movies").fadeOut();
            $("div#results-container").fadeIn();
            $("div#results").fadeIn();
            $("div#results").html(html);
        }
});

Answer 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.

Answer 2

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() .

Answer 3

Use j Query ready event

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

Answer 4

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

Example

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

Answer 5

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

Answer 6

Thanks for the help from all of you guys. I was able to figure it out.. @jasen mentioned that you to declare it as a body tag. Here was the solution I was able to use:

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

Thank you Derek as well.. you provided some useful examples for the future.

Answer 7

First, specify a selector where all the tr.info node will be contained, now and in future. From your latest edit of the post, I believe that's table#movies .

Then attach event with on and specify the children selector tr.info :

$('table#movies').on('click', 'tr.info', function () {
    alert($(this).attr('movie'));
});

See example on jsFiddle