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

Question

We have around twenty input checkboxes, and they're divided into six groups using CSS classes. We added an event handler for the change event on each of the six classes, and then we added a final event handler for the change event on the input element itself. It looks like this:

(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();

When I finally call $('input[name="cbox"]').change() , the only event handler that gets called is the last one, ie

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

All the other event handlers that I added (for classes A, B, C, D, E and F) don't get called. Why is this? Shouldn't $('input[name="cbox"]').change() trigger all of the event handlers, and not just the one?

Answer 1

Try this,

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

Answer 2

jsfiddle

I dont know why its not working, Working to me i posted fiddle for sandbox

 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

If you're adding the checkboxes dynamically you should try :

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