Включение события change () для входных флажков не запускает все обработчики событий

Question

У нас около двадцати флажков ввода, и они разделены на шесть групп с использованием классов CSS. Мы добавили обработчик события для события изменения в каждом из шести классов, а затем добавили обработчик окончательного события для события изменения в самом элементе ввода. Это выглядит так:

(HTML)

<input type="checkbox" name="cbox" class="A"> 1
<input type="checkbox" name="cbox" class="A"> 2
<input type="checkbox" name="cbox" class="B"> 3
<input type="checkbox" name="cbox" class="B"> 4
// ...
// checkboxes for classes C, D, E
// ...
<input type="checkbox" name="cbox" class="F"> 20

(JQuery)

$('.A').change(function() {
    // doesn't get called
});

$('.B').change(function() {
    // doesn't get called
});

$('.C').change(function() {
    // doesn't get called
});

$('.D').change(function() {
    // doesn't get called
});

$('.E').change(function() {
    // doesn't get called
});

$('.F').change(function() {
    // doesn't get called
});

$('input[name="cbox"]').change(function() {
    // this one gets called
});

$('input[name="cbox"]').change();

Когда я наконец вызываю $('input[name="cbox"]').change(), единственный обработчик события, который вызывается, является последним, т.е.

$('input[name="cbox"]').change(function() {
    // this one gets called
});

Все остальные обработчики событий, которые я добавил (для классов A, B, C, D, E и F), не вызываются. Почему это? Разве $('input[name="cbox"]').change() не должен запускать все обработчики событий, а не только один?

Answer 1

Попробуйте это,

$('input.A').change(function(event) {
      alert($(this).val());
});

Answer 2

jsfiddle

Я не знаю, почему это не работает, Работая со мной, я разместил скрипку для песочницы

let classnamelist = ['a','b','c','d','e','f','g','l','m','n','o','p','q','r','s','y',]
for(let i = 0; i<classnamelist.length; i++){
let el = $('<input>').attr({
'type':'checkbox',
'name':'cbox'
}).addClass(classnamelist[i]);

$('body').append(el);

$('.'+classnamelist[i]).change(function(){
alert($(this).is(':checked'))
})
}
$('input[name=cbox]').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

Если вы добавляете флажки динамически, попробуйте:

$(document).on('change', '.A', function() {
   // do stuff
});