爲什麼在向頁面動態添加內容後，我的JS功能不起作用？

我有一個在我的網頁開始定義的javascript函數。當我在表格中點擊一行時，它會被調用。爲什麼在向頁面動態添加內容後，我的JS功能不起作用？

這裏是我的功能：

$(".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); 
     } 
});

來源

2013-03-28 Andrew Butler

http://api.jquery.com/on – 2013-03-28 04:17:27

您正在使用AJAX來獲取內容

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

見例如：

然後用on附加事件，並註明兒童選擇tr.info。 – 2013-03-28 04:18:20

我正在使用ajax函數來獲得內容 – 2013-03-28 04:20:51

要動態添加元素，所以當你設置單擊處理它未註冊。

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

body通常工作，但最好你想要接近你的選擇.info儘可能DOM元素。

來源

2013-03-28 04:31:00 Jasen

你的PHP腳本是最有可能不添加類的錶行。改變它來添加該類。

來源

2013-03-28 04:17:43

我有類添加到表[R ow ..它輸出與以前 – 2013-03-28 04:20:26

你必須這樣做：

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

通過添加一個「容器」，它有一個像.live()的效果。

來源

2013-03-28 04:21:43

謝謝你的幫助，但當我添加「表」部分，該行不會點擊 – 2013-03-28 04:26:18

約j查詢這樣的版本在j查詢1.7中棄用和刪除：1.9 – 2013-03-28 04:36:43

使用Ĵ查詢ready事件

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

來源

2013-03-28 04:27:27

我不喜歡認爲你不需要'.ready'，因爲新的元素在DOM被加載後加載。 – 2013-03-28 04:28:37

它被測試..併爲我工作得很好.. – 2013-03-28 04:30:46

感謝您們大家的幫助。我能夠弄明白.. @ jasen提到你要將它聲明爲一個body標籤。這裏是解決方案，我能夠使用：

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

謝謝德里克以及..你爲未來提供一些有用的例子。

來源

2013-03-28 04:32:47

在document上添加.on因爲您正在將DOM添加到文檔中。

例

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

來源

2013-03-28 04:33:10

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

來源

2013-03-28 04:34:12

爲什麼在向頁面動態添加內容後，我的JS功能不起作用？

回答

相關問題