jQuery strange behaviour on click() from a click()

Question

Hi,
I am facing a strange behaviour in jQuery 1.4 with the click event. The idea is to click on a drop-down list (change()), which then invert twice a collection of checkboxes by using the click() function of them.
If I have to do so it is because the click on checkboxes update other fields, so I thought instead of inverting the checkboxes checked attribute, let's just call twice the click on all checkboxes.

Although all the checkboxes are correctly inverted twice, the .length I'm using on the click function looses the right count during the operation, and everytime returns 1 more than it should.

To make it clear here's the idea of the code:

//The 'click' function
$('input:checkbox').click(function(){
    $(this).parent().find("input:checkbox:checked").length;//<- this one's not returning the right count
    //some code updating other fields thanks to the 'length' of the checkboxes
});

//The dropdown function
$('select.dropdown').change(function(){
    $(this).parent().find("input:checkbox").click();//Invert the first time
    $(this).parent().find("input:checkbox").click();//Invert a second time
});

When I manually check and uncheck the fields, everything's working perfectly, it's just when the dropdown call it that the length count is wrong.

Here are 2 scenarios to explain even more in depth the issue I'm experiencing:

1. If I choose something from the dropdown (the length fails) and then uncheck and recheck a checkbox, the count is right.
2. If I add a buggy code at the end of the click() function, it works fine except raising an error on the javascript debugger console. Btw, I cannot keep this solution because another function fails in this case.

Cheers,
Nicolas.

Answer 1

Assuming that the checkboxes and the dropdown share the same form, why not do this...

function countCheckedBoxes(theForm){
    theForm.find("input:checkbox:checked").length;//<- this one's not returning the right count 
    //some code updating other fields thanks to the 'length' of the checkboxes 
}); 

//The 'click' function 
$('input:checkbox').click(function(){ 
    countCheckedBoxes($(this.form));
}); 

//The dropdown function 
$('select.dropdown').change(function(){ 
    countCheckedBoxes($(this.form));
}); 

Then you aren't relying on handling click events in a nested manner(which I believe is the problem) and you are running the 'countCheckedBoxes()' function explicitly, instead of relying on a side-effect of the checkboxes being clicked.