如何处理动态的jQuery

Question

我想创建下拉菜单按在txtCols其的onkeyup功能像这样指定的int值所产生的下拉菜单onchange事件：

$("#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'); 
    } 

}); 

下拉式生成id ='header + i'[增量变量] 现在，在选择这些下拉列表时，我想触发一个事件，基本上可以生成文本框，下拉菜单或日历根据所做的选择。

我为它的代码是这样的：

$(function(j) { 
    $('#header' + j).change(function() { 
     alert('Got Value'); 
    }); 
}(j)); 

也试过：

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

但这一事件是行不通的。

Answer 1

试试这个：

第一添加类到您选择水木清华这样的：选择ID = “头 '+ $ I +'” 级= “头”/

下一个加处理程序：

$(".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 .. 
    } 
}); 

Answer 2

使用的功能有呼吁动态添加元素的处理程序：

$(document).on('change', '#header' + j, function() { 

，或者任何j：

$(document).on('change', '[id^="header"]', function() { 

但我宁愿使用一个类不是选择匹配的开始的编号：

$(document).on('change', '.header', function() { 
... 
var s = $('<select class=header id="header'+$i+'"/>');