为输入复选框触发 change() 事件不会触发所有事件处理程序

Question

我们有大约20个输入复选框，它们使用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
});