Как создать динамические обработчики событий?

Question

Я создаю выпадающий динамически.

Их идентификаторы: 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 обработчиков событий.

Как реализовать динамическое создание события изменения?

Мои методы выпадающий Append являются:

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/