如何处理由jquery动态生成的下拉列表中的onchange事件

时间:2012-10-26 10:32:51

标签: jquery dynamic drop-down-menu

我正在尝试按照 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));

但是这个事件没有用。

2 个答案:

答案 0 :(得分:3)

使用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+'"/>');

答案 1 :(得分:1)

试试这个:

首先将类添加到您选择的smth中:select id =“header'+ $ i +'”class =“header”/

下一步添加处理程序:

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