jquery - 如何处理 jquery 动态生成的下拉菜单上的 onchange 事件

Question

我正在尝试根据 onkeyup 函数上 txtCols 中指定的 int 值创建下拉菜单，如下所示:

$("#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

使用 on 函数在动态添加的元素上调用处理程序:

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

或者，对于任何j:

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

但我宁愿使用类而不是匹配 id 开头的选择器:

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