javascript - 如何动态创建 "change"事件处理程序？

Question

我动态创建下拉菜单。

它们的 ID 为 ddl1、ddl2、ddl3 等。

$('#ddl1').focus(function() {
    var previous = this.value;
}).change(function() {
    var index = $(this).find('selected').index();
    $('#ddl1').find('option:eq(' + index + ')').hide();
    $('#ddl2').find('option:eq(' + index + ')').hide();
});

$('#ddl2').focus(function() {
...

创建 7 个下拉菜单使我需要编写 7 个 change 事件处理程序。

如何实现动态创建change事件？

我的下拉附加方法是:

var x=1;
var dropdown=('#ddl1').html();
$('#btnadd').click(function() {    
   $('#divname').append('<select id="ddl'+x+' > </select> <option>../option>');
   x++;    
});

Answer 1

为每个下拉列表提供一个公共(public)类并引用它。另外，使用 .on() (事件委托(delegate))来捕获动态创建的元素:

$(document).on('change', '.common-class', function() {
   //Your function
   var currentId = $(this).attr('id');
});

更新

每次附加 select 元素时都添加相同的类:

//...
$('#divname').append('<select id="ddl'+ x + '" class="common-class"><option>../option></select>');

所选选项

为了获取所选选项:

$('#current-id').find('option:selected').index();