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
});

jQuery.click一个尚未加载的div

1 个答案: