JQuery при смене события для неправильного элемента

Question

У меня есть два элемента <select>: select.exerciseType и #moduleTopic, каждый со своим собственным обработчиком, обернутым вокруг document. Я считаю, что важно знать, что select.exerciseType является динамичным, и их может быть несколько. Их события:

$(document).ready(function() { 
    $(document).on("change", $("select.exerciseType"), function(e) { 
     <!--Code not really important--> 
    } 
    $(document).on("change", $("#moduleTopic"), function(e) { 
     <!--Code not really important--> 
    } 
} 

Моя проблема, когда я изменить выбранный параметр в одном из этих выбирает, как эти события стрельбы. Почему селектор функции on() не работает и как я могу заставить его работать?

Answer 1

Синтаксис для jQuery .on handler является .on(events [, selector ] [, data ], handler) где второй аргумент string

В вашем случае, как это не string, она опущена и event всегда срабатывает, когда он достигнет выбранного элемента!

$(document).ready(function() { 
    $(document).on("change", "select.exerciseType", function(e) {}); 
    $(document).on("change", "#moduleTopic", function(e) {}); 
}); 

Answer 2

Вы можете использовать этот код вместо:

$("#moduleTopic").change(function() { 
// code executes here 
}); 

EDIT ---

Вы можете использовать имя класса и обнаружить <select> изменяется за счет использования $(this) внутри вашей функции.

Answer 3

Вам не требуется document.ready, и вы также просто указываете селектор, а не извлекаете его. т.е.

$(document).on("change", "select.exerciseType", function(e) { 
    <!--Code not really important--> 
} 
$(document).on("change", "#moduleTopic", function(e) { 
    <!--Code not really important--> 
}