JQuery警告，当一个选择框被改变

Question

好了，到目前为止，我以同样的方式完成的所有其他函数都运行正常。不管出于什么原因，这个是行不通的。我不知道是否有什么我错过了，或者如果可能是一个潜在的错误，在早期的代码可能会导致这一点。下面是我的代码:

  jQuery("#teamTab_addPlayerForm").on('change', 'select#teamTab_suggestedPlayer', function(e) {
    e.preventDefault();
    alert('It Worked');
});

这是调用它的PHP文件:

 $output .= '<div id="ld_addPlayerFunction" style="clear:both; width:100%;"><h3>Add Player</h3>';
        $standins = $wpdb->get_results('SELECT * FROM ' . $wpdb->prefix . 'kdc_user_sync ORDER BY computedMMR ASC');
        $output .= '<form id="teamTab_addPlayerForm" action="" method="POST">
            <select id="teamTab_suggestedPlayer" name="suggestedPlayer">
                <option value="base">Suggested Player</option>';
            foreach($standins as $standin){
                $playerID = $wpdb->get_var('SELECT ID FROM ' . $wpdb->prefix . 'leagueDesigner_players WHERE userID = ' . $standin->userID);
                $test = true;
                if($playerID != ''){
                    $leagueTest = $wpdb->get_results('SELECT * FROM ' . $wpdb->prefix . 'leagueDesigner_league_players WHERE playerID = ' . $playerID);
                    foreach($leagueTest as $test){
                        if ($test->leagueID == $leagueID){
                            $test = false;
                        }
                    }
                }
                if($standin->computedMMR < ($suggestedMMR + 100) && $standin->computedMMR > ($suggestedMMR -100) && $test == true){
                    $output .= '<option value="' . $standin->userID . '">' . substr($standin->profileName, 0, 20) . ' - ' . $standin->computedMMR . ' MMR</option>';
                }
            } 
        $output .= '</select><br />';
        $output .= '</form>';

随后在脚本中回显输出。所以一个用户告诉我使用文档而不是#teamTab_addPlayerForm，它的工作，但我想知道为什么这以前的代码工作得很好，一个没有:

jQuery("#teamTab_teamListForm").on('change', 'select#teamTab_teamSelect', function (e) {
    e.preventDefault();
    jQuery(this).attr('disabled', true);
    var teamID = jQuery(this).val();
    jQuery('select#teamTab_leagueSelect').attr('disabled', true);
    var leagueID = jQuery('select#teamTab_leagueSelect').val();
    data = { action: "leagueDesignerTeamsTabLoadTeamPlayers", leagueID: leagueID, teamID: teamID };
        jQuery.ajax({
            type: 'POST', url: ajaxurl, data: data, dataType: 'html', success: function(response) {
                if (response == "error") {
                    jQuery('select#teamTab_teamSelect').attr('disabled', false);
                    alert('There was an error processing your request');
                }
                else {
                    jQuery('select#teamTab_teamSelect').attr('disabled', false);
                    jQuery('select#teamTab_leagueSelect').attr('disabled', false);
                    jQuery('.ld_teamEdit').remove();
                    jQuery('#ld_addPlayerFunction').remove();
                    jQuery('div#ld_teamTabTeamInfo').remove();
                    jQuery('#teamTab_teamListForm').after(response);
                }
                }});
});

这是用同样的方式处理选择框的代码。下面是PHP代码:

function leagueDesignerTeamsTabLoadLeagueTeams () { 
global $wpdb;
$leagueID = $_POST['leagueID']; //Pull the POST'd leagueID
$output = '<select id="teamTab_teamSelect" name="team"><option value="">Choose a Team</option>'; //Output...
$errors = 0; //Error checking...
$teams = $wpdb->get_results('SELECT * FROM ' . $wpdb->prefix . 'leagueDesigner_teams WHERE leagueID = ' . $leagueID);
foreach($teams as $team){
    $output .= '<option value="' . $team->teamID . '"';
    if ($_POST['team'] == $team->teamID){
        $output .= ' selected';
    }
    $output .= '>' . $team->teamID . '. ' . $team->teamName . '</option>';
}
if (!$teams) {
    $errors++;
}
$output .= '</select>';
if ($errors == 0) { echo $output; } else { echo 'error'; }
die(); // this is required to return a proper result 

}

Answer 1

元素是在页面加载后创建的，所以你需要将它绑定到一个已经存在的元素(见下文)

$(document).on('change', '.class-name', function () {
    //Commands to run on change
});