Question

我已链接选择列表由Ajax成功生成的新选择框和通过AJAX响应填充数据的标签。

的是在下面但是，对于快速摘要：

on"change"事件应该与所有select标签来name开始与“正”的工作。但事实并非如此。任何指导意见表示赞赏。阿贾克斯成功产生

var loading = '<div class="span3" id="loading"><div style="height:264px; background: url(/assets/frontend/img/loading_searching.gif) 50% 50% no-repeat;"></div></div>'; 

function count_selectes() { 
    return $('select').length; 
} 

function generate_bs_span(div_class,div_id) { 
    return $('<div></div>').addClass(div_class).attr('id',div_id); 
} 

function generate_category_select(sname, sid, sclass, soptionList) { 
    var els = $("<select></select>").attr("size", '15').attr("id", sid).attr("name", sname).addClass(sclass); 

    $.each(soptionList, function (i, data) { 
     els.append("<option value="+data.id_map+">" + data.map_text + "</option>"); 
    }); 

    return els; 
} 

var sDIndex = 1; 

$(function() { 
    $('select[name^="n-"]').on('change',function(e){ 
    alert('clicked'); 
    var fragment = $(this); 
    var slID = $(this).val(); // selected_id 
    var dSrc = $(this).data('source'); // data-source 
    var dChl = $(this).find(':selected').data('children'); // data-children 
    var sCnt = count_selectes(); // select count 
    var cSID = explode('-',$(this).attr('id')); // id for current selection list 
    var cSSI = parseInt(cSID[1])+1; // starting index + 1 for removing unused select boxes 
    ++sCnt; 
    for (var i=parseInt(cSSI);i<parseInt(sDIndex)+1;i++){$('#d-'+i).remove();} 
    $.ajax({ 
     url: '/ilan/fetch_sub_categories', 
     data: {id:slID,dsrc:dSrc,dchl:dChl}, 
     beforeSend:function(){ 
     $(this).parent('div').after(loading); 
     }, 
     success:function(data){ 
     $('#loading').remove(); 
     $(fragment).parent('div').after(generate_bs_span('span3','d-'+sCnt)); 
     $('#'+'d-'+sCnt).html(generate_category_select('n-'+sCnt,'s-'+sCnt,'cat_select',data)); 
     ++sDIndex; 
     enable_select_tracking(); 
     }, 
     error:function(){ 
     $('#loading').remove(); 
     alert('ajax returns error'); 
     } 
    }); 
    }); 
}); 

Answer 1

新的选择框

您需要使用Event Delegation。您必须使用委托事件方法使用.on()。

即

$(document).on('event','selector',callback_function) 

例

$(document).on('change', 'select[name^="n-"]', function(){ 
    //Your code 
    alert("clicked me"); 
}); 

在地方的document你应该用最接近的静态容器。

委派事件的优点是它们可以处理后来添加到文档中的后代元素的事件。通过选择在委托事件处理程序附加时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并避免频繁附加和移除事件处理程序。