設置使用jQuery

Question

我正在創建兩個dropsdowns這樣

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

現在我定義這樣

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

的check_data_function但問題是設置onchange事件動態創建的下拉列表中，check_data（ ）函數沒有被調用。

我該如何做到這一點？

這裏是我的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> 

以下是完整的腳本

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

終於找到了！你必須使用on: {...}像這樣：[？事件綁定的動態創建的元素]

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

正如在本JQuery documentation

Answer 2

此功能可以在頁面加載運行，它會趕上添加到頁面之後的任何選擇要素的變化情況

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