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及其内部子元素的所有事件将不可用。 在这种情况下，您需要使用事件委托 ：

事件委托使我们可以将单个事件侦听器附加到父元素，该元素将为与选择器匹配的所有子对象触发，无论这些子对象现在存在还是将来添加。

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