forms - jQuery .change() isn't firing as expected for a dropdown list, and I can't see why -

i having trouble spotting why jquery function isn't working expected. goal send ajax call server when dropdown changes, update fields in next half of form:

with extraneous functions removed, jquery looks this:

$(document).ready(function(){     //re-load form when new game type selected     $("#meta_game_type_dropdown").change(function(){         alert('woop');         $.post('http://client2.dev/index.php/match/create_match_form',         {             game_type: $('#meta_game_type_dropdown').val(),         },         function(data, status){             $('#match_form').html(data);             $('.numeric_only').forcenumeric();             //set default time current time             $('#meta_time_input').setnow();         });     }); }); 

however, i'm not getting woop alert when change dropdown. have confirmed id correct:

<select name="game_type" id="meta_game_type_dropdown"> 

so i'm stumped now. ideas appreciated.

use event delegation attach event. event delegation allows attach single event listener, parent element, fire descendants matching selector, whether descendants exist or added in future.

 $(document).ready(function(){ //re-load form when new game type selected   $(document).on('change',"#meta_game_type_dropdown",function(){     alert('woop');     $.post('http://client2.dev/index.php/match/create_match_form',     {         game_type: $('#meta_game_type_dropdown').val(),     },     function(data, status){         $('#match_form').html(data);         $('.numeric_only').forcenumeric();         //set default time current time         $('#meta_time_input').setnow();     });   }); });