Set set onchange event for dynamically created dropdown using jquery

Question

i am creating two dropsdowns like this

var drp_nt = $('<select />', {
                               'id'     : 'drp_' + nt,
                               'name'   : 'drp_' + nt+'[]',
                               'onchange' : check_data(),
                               'multiple': true});

var drp_cnt = $('<select />', {
                              'id'     : 'drp_' + cnt,
                              'name'   : 'drp_' + cnt+'[]',
                              'onchange' : check_data(),
                              'multiple': true});

Now i am defining the check_data_function like this

function check_data()
{
    if($("select option:selected").length==2)
        alert('Two Dropdown Selected');
    else
        alert($("select option:selected").length);
}

but the issue is, the check_data() function isn't getting called.

How can i achieve this..???

Here's my HTML

<div id="cont_drp_nt" class="drp_container">
<img id="drp_nt_loader" class="loader_img" src="images/ajax-loader-1.gif" style="display: none;">
<select id="drp_nt" name="drp_nt[]" multiple="multiple" style="display: none;">
<option value="http://api.hasoffers.com/v3/Affiliate_Offer.json">http://api.hasoffers.com/v3/Affiliate_Offer.json</option>
</select>
<div class="btn-group">
<button class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" type="button" title="http://api.hasoffers.com/v3/Affiliate_Offer.json">
<ul class="multiselect-container dropdown-menu" style="max-height: 200px; overflow-y: auto; overflow-x: hidden;">
</div>
</div>

Here's the full script

function get_data(v)
{
    var cnt = 'cnt';
    var ctg = 'ctg';
    var api = 'api';
    var nt = 'nt';
    $('#drp_'+cnt).remove(); 
    $('#drp_'+ctg).remove(); 
    $('#drp_'+api).remove(); 
    $('#drp_'+nt).remove();
    $('.btn-group').remove();



    $('#drp_'+cnt+"_loader").show();
    $('#drp_'+ctg+"_loader").show();
    $('#drp_'+api+"_loader").show();
    $('#drp_'+nt+"_loader").show();

    $.post("ajax.php",{'version':v,'func':'get_nt'},
                function(data)
                {
                    $('#drp_'+nt+"_loader").hide();
                    var drp_nt = $('<select />', {
                                     'id'     : 'drp_' + nt,
                                     'name'   : 'drp_' + nt+'[]',
                                     'change' : check_data(),
                                     'multiple': true});
                    for(i=0;i<data.length;i++)
                    {
                            content ="<option value="+data[i].network+">"+data[i].network+"</option>";
                            $(drp_nt).append(content);
                    }
                    $('#cont_drp_'+nt).append(drp_nt);
                    $(drp_nt).multiselect({
                                includeSelectAllOption: true,
                                enableFiltering: true,
                                maxHeight: 200,
                                allSelectedText: 'No option left ...'
                            });
                }, "json");

    $.post("ajax.php",{'version':v,'func':'get_api'},
                function(data)
                {
                    $('#drp_'+api+"_loader").hide();
                    var drp_api = $('<select />', {
                                     'id'     : 'drp_' + api,
                                     'name'   : 'drp_' + api+'[]',
                                     'multiple': true});
                    for(i=0;i<data.length;i++)
                    {
                            content ="<option value="+data[i].api+">"+data[i].api+"</option>";
                            $(drp_api).append(content);
                    }
                    $('#cont_drp_'+api).append(drp_api);
                    $(drp_api).multiselect({
                                includeSelectAllOption: true,
                                enableFiltering: true,
                                maxHeight: 200,
                                allSelectedText: 'No option left ...'
                            });
                }, "json");



    $.post("ajax.php",{'version':v,'func':'get_category'},
                function(data)
                {
                    $('#drp_'+ctg+"_loader").hide();
                    var drp_ctg = $('<select />', {
                                     'id'     : 'drp_' + ctg,
                                     'name'   : 'drp_' + ctg+'[]',
                                     'multiple': true});
                    for(i=0;i<data.length;i++)
                    {
                            content ="<option value="+data[i].category+">"+data[i].category+"</option>";
                            $(drp_ctg).append(content);
                    }
                    $('#cont_drp_'+ctg).append(drp_ctg);
                    $(drp_ctg).multiselect({
                                includeSelectAllOption: true,
                                enableFiltering: true,
                                maxHeight: 200,
                                allSelectedText: 'No option left ...'
                            });
                }, "json");



    $.post("ajax.php",{'version':v,'func':'get_country'},
                function(data)
                {
                    $('#drp_'+cnt+"_loader").hide();
                    var drp_cnt = $('<select />', {
                                     'id'     : 'drp_' + cnt,
                                     'name'   : 'drp_' + cnt+'[]',
                                     'multiple': true});
                    for(i=0;i<data.length;i++)
                    {
                            content ="<option value="+data[i].country+">"+data[i].country+"</option>";
                            $(drp_cnt).append(content);
                    }
                    $('#cont_drp_'+cnt).append(drp_cnt);
                    $(drp_cnt).multiselect({
                                includeSelectAllOption: true,
                                enableFiltering: true,
                                maxHeight: 200,
                                allSelectedText: 'No option left ...'
                            });
                }, "json");
}

Answer 1

Finally found it ! You have to use on: {...} like this:

var drp_nt = $('<select />', {
    'id': 'drp_' + nt,
    'name': 'drp_' + nt + '[]',
    on: {
        change: check_data
    },
    'multiple': true
});

var drp_cnt = $('<select />', {
    'id': 'drp_' + cnt,
    'name': 'drp_' + cnt + '[]',
    on: {
        change: check_data
    },
    'multiple': true
});

As in the JQuery documentation

Answer 2

This function can be run on page load, and it will catch the change event of any select elements added to the page afterwards

$(document).on("change", "select", function(){
    // do stuff
});