jquery selectors - call the change event after the SELECT is populated? -

so, have dynamically generated select, gets populated php-mysql table. have on change event select, deals times user changes selected value on page. when change event fired, populate 3 input boxes values select option.

it works fine, except, when enter (or refresh) page select, select gets populated, onchange event not fire. sure onchange gets fired, happens before select populated there no values offer. can do? how can call change event after select populated properly php?

my code onchange is:

$(document).ready(function(){     $('#myselect').change(function(){       var selected = $(this).find('option:selected');       $('#pux').val(selected.data('foo'));     }).change(); }); 

so basically, want input name , id = pux filled data-foo value of select option. mean, structure of options of select like:

<option id="1" value="whatever" data-foo="something_important">first option</option> 

and of course destination input box is:

<input type="text" name="pux" id="pux" value="0" /> 

like said: event works great on manual change of select, on page show (document.ready) pux input box set nothing... empty... want able get change event fire after select populated. since , after select gets populated, the select box selects automatically first option , displays it.

• i tried use $(document).on("change", function()... outside of document.ready it's no change

• i tried set value of input, right after populating select php id not seem work. either place code in wrong place, or not know think anymore...

my code calls php in order populate is:

$('#myselect').toggle('fast', function(){   $(this).html(ajaxloader);   $(this).toggle('fast', function(){     $.get(loadurl, function(data){       $('#myselect').html(data);       $('#myselect').selectmenu("refresh",true);     },'html'); // , here placed assignment     var selx  = $('#myselect').find('option:selected');     $('#pux').val(selx.data('foo'));   }); }); 

still nothing...

any appreciated. thank you

from question, appears populating select list dynamically not call change() event. therefore, may want consider extracting change event handler separate procedure:

function populatepux() {   var selected = $('#myselect option:selected');   $('#pux').val(selected.data('foo')); }  $(document).ready(function(){     $('#myselect').change(populatepux); }); 

you can run populatepux() after #myselect populated, in function use particular process.