Working with load and on function

Question

I have this code:

<div id="gll_select">
            <script>
             var caffe = $("#caffe").val();
             $("#gll_select").load("<?php echo base_url() ?>form/galleries", {id : caffe});  
            </script>
</div>

which loads this:

<select name="gll" id="gll">
    <?php foreach ($galleries as $key) : ?>
        <?php if($id == $key['caffe_id']) :?>
        <option value="<?php echo $key['id_gallery'] . " " . $key['name'] ?>"><?php echo $key['name'] ?></option>
        <?php endif; ?>
    <?php endforeach; ?>        
</select>

and this one:

$("#gll").on('change',function(){
    var cff_name = $("#caffe_name").val();
    var gll = $("#gll").val();
    var gll = gll.split(' ');
    var gll_id = gll[0];            
    var data = "cff_name=" + cff_name + "&gll_id=" + gll_id;
    $('table tbody').empty();
    $.ajax({                
                url: '<?php echo base_url() ?>upload/get_files',
                dataType: 'json', 
                data : data,
                success : function(data) {                   
                    var fu = $('#fileupload').data('fileupload'), 
                    template;
                    fu._adjustMaxNumberOfFiles(-data.length);
                    template = fu._renderDownload(data)
                    .appendTo($('#fileupload .files'));                    
                    // Force reflow:
                    fu._reflow = fu._transition && template.length &&
                    template[0].offsetWidth;
                    template.addClass('in');
                    $('#loading').remove();
                }
});
});

Problem is that on change nothing happens. What I need to do?

Answer 1

you should attach the handler for #gll element after the load() call has completed (which actually acts like an asynchronous ajax call): probably at the moment you have defined the handler for the change event before you load the html code, so nothing happen because the select doesn't exist yet.

try to change in this way

$("#gll_select").load("<?php echo base_url() ?>form/galleries", {id : caffe}, 
    function() {
        $("#gll").on('change',function(){
        ...
    }
});