Question

我们大约有20个输入复选框，并且使用CSS类将它们分为六个组。我们在六个类中的每个类上为change事件添加了一个事件处理程序，然后在输入元素本身上为change事件添加了一个最终事件处理程序。看起来像这样：

（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
});

触发输入复选框的change（）事件不会触发所有事件处理程序

3 个答案: