如何动态创建“更改”事件处理程序？

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事件处理程序。

如何实现动态创建更改事件？

我的下拉追加方法是：

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

Answer 1

举一个常见的类的每一个下拉列表，并参阅。此外，使用.on()（事件代表团）来捕捉动态创建的元素：

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

UPDATE

添加同等级每次追加select元时间：

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

选择的选项

为了得到t他选择的选项：

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

Answer 2

变无委派事件减少资源使用量：

var $dds = $('select'); 

$dds.each(function(index) { 
    var $this = $(this); 
    processDdChange($this); 
}); 

function processDdChange($obj) { 
    $obj.on('change', function(e) { 
     var $this = $(this); 
     alert($this.attr('id') + ' | ' + $this.find(':selected').val()); 
}); 
} 

https://jsfiddle.net/tasmanangel/2p9mbs7h/