將內容動態添加到頁面后，為什么我的JS函數不起作用？

Question

我在網頁的開頭定義了一個javascript函數。 在我的表格中單擊某行時會調用它。

這是我的功能：

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

這是我的表格行的樣子：

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

現在，當我第一次加載頁面時會顯示該表，我可以單擊該行，它將正確調用該函數。 我正在嘗試為表實現搜索功能。 我有php腳本返回表行，就像上面的那一行一樣，我將它們添加到了表中，但是當我單擊從php腳本返回的行時，沒有調用javascript函數。 有人知道我該怎么做嗎？ 我沒有運氣。

編輯

這是我獲取搜索結果的功能：

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

您正在動態添加元素，因此在設置點擊處理程序時不會注冊它。

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

body通常可以使用，但理想情況下，您希望DOM元素盡可能靠近選擇器.info 。

Answer 2

您必須這樣做：

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

通過添加“容器”，它將具有類似於.live()的效果。

Answer 3

使用j查詢就緒事件

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

Answer 4

在document上添加.on ，因為您.on DOM添加到文檔中。

例

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

Answer 5

您的php腳本很可能沒有將類添加到表行。 對其進行更改以添加該類。

Answer 6

謝謝大家的幫助。 我能夠弄清楚。.@ jasen提到您將其聲明為body標簽。 這是我可以使用的解決方案：

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

謝謝德里克（Derek），您也提供了一些有用的示例。

Answer 7

首先，指定一個選擇器，現在和將來將包含所有tr.info節點。 從您對帖子的最新編輯中，我相信它是table#movies 。

然后將事件附加到on並指定子選擇器tr.info ：

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

參見jsFiddle上的示例