Q:

How to handle onchange event on drop-downs that are dynamically generated by jquery

I am trying to create drop-downs as per the int value specified in txtCols on its onkeyup function like this:
$("#txtCols").keyup(function(){ 
    var $count = $(this).val();

    $("#holder").html('');

    // define matrix header options available
    var matrixHeaders = {
        'TB': 'Text Box',
        'DD': 'Drop Down',
        'CL': 'Calendar'
    }

    for ($i=0;$i<$count;$i++) 
    { 

        var s = $('<select id="header'+$i+'"/>');
        for(var val in matrixHeaders) {
            $('<option />', {value: val, text: matrixHeaders[val]}).appendTo(s);
        }
        s.appendTo('#holder');
    } 

}); 

The drop-downs are generated with id='header+i' [increment variable]
Now, on the selection of these drop-downs, i want to trigger an event basically to generate Text Box, Drop Down or Calendar as per the selections made. 
My code for it is this:
$(function(j) {
   $('#header' + j).change(function() {
      alert('Got Value');
   });
}(j));

Also tried:
$(document).on('change', '#header' + j, function() {        
  alert('hii');
}(j));

But this event is not working.

A:

Use the on function to have the handler called on dynamically added elements :
$(document).on('change', '#header' + j, function() {

or, for any j :
$(document).on('change', '[id^="header"]', function() {

But I would rather use a class than a selector matching start of id :
$(document).on('change', '.header', function() {
...
var s = $('<select class=header id="header'+$i+'"/>');

A:

try this:
first add class to your selects smth like:   select id="header'+$i+'" class="header"/
next add handler:
$(".header").live("change", function () {
    var id = $(this).attr("id").split("header").join(""); //get i
    var opt = $("#header" + id + " option:selected").val(); //or whatever you need
    switch (opt) {
      case ..
    }
});

