jQuery.click對尚未加載一個div

Question

我動態地加載在頁面Leagues.php一個div像這樣的按鈕：

$("#leaguesSelectionTable th").click(function(){ 
    var leagueSelect = $(this).attr('id'); 
    if ($('#leaguesTable').length){ 
     $("#loadLeagueTables").empty(); 
     $("#loadLeagueTables").load("php/leagueTable.php?leagueSelect="+encodeURIComponent(leagueSelect)); 
    } 
    else { 
     $("#loadLeagueTables").load("php/leagueTable.php?leagueSelect="+encodeURIComponent(leagueSelect)); 
    } 
}); 

這會加載一個表基於我按下哪個按鈕，使用leagueTable.php來處理所有這些。一旦加載了這張表（一堆聯賽），我想要點擊這張表中的一行並按照相同的邏輯顯示團隊表。

$("#assoc_league tr").click(function(){ 
    var teamSelect = $(this).attr('id'); 
    if ($('#teamsTable').length){ 
     $("#loadTeamTables").empty(); 
     $("#loadTeamTables").load("php/teamTable.php?teamSelect="+encodeURIComponent(teamSelect)); 
    } 
    else {  
     $("#loadTeamTables").load("php/teamTable.php?teamSelect="+encodeURIComponent(teamSelect)); 
    } 
}); 

我認爲問題在於，因爲#assoc_league表還沒有出現，所以這是行不通的。我嘗試了一個警報，沒有得到任何迴應。這個jQuery在連接到Leagues.php的同一個文件中。任何想法如何處理這個？

謝謝。

Answer 1

由於您的表已動態添加到DOM，因此此table及其內部的子元素的所有事件都不可用。在這種情況下，你需要使用event delegation：

事件代表團允許我們附加一個單一的事件偵聽器，到 父元素，這將觸發對所有選擇， 那些孩子是否存在匹配的孩子現在或將來添加。

$('#loadLeagueTables').on('click', '#assoc_league tr', function() { 
    // Your code here 
});