jQuery on change binding with jQuery produced HTML

Question

I have chained select lists which tags for new select box generated by ajax success and data populated via AJAX response.

The is at below however, for quick summary:

on "change" event supposed to work with all select tags which name starts with "n-". But it is not.

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

new select box generated by ajax success

You need to use Event Delegation. You have to use .on() using delegated-events approach.

i.e.

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

Example

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

In place of document you should use closest static container.

The delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, we can use delegated events to bind the click event to dynamically created elements and also to avoid the need to frequently attach and remove event handlers.