Предупреждение JQuery при изменении поля выбора

Question

Итак, все остальные функции, которые я сделал таким же образом, работали до сих пор. Это одна по какой-либо причине не work.I не знаю, если есть что-то я "м отсутствует или, если возможно, потенциальная ошибка в коде ранее могли привести к этому Вот мой код:.

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