jQuery click event handler is called twice for a checkbox

I have just experienced the same thing, but am not sure that event bubbling is causing my issue. I have a custom tree control, and when an item is opened, I use $(id).click() to attach a handler to all elements of a certain kind.

I suspect that this means that existing items elsewhere that already have the event, may then have it added again. I found that unbinding everything then re-binding solved my problem, thus:

$('img.load_expand').unbind("click").click(function()
{
  // handler
});

I think it's because a <label> with a for attribute raises the click event of <input type="radio"> or <input type="checkbox"> element that is associated for when clicked.

So in your jQuery code, you set up a click event handler for both the <label> and the <input> inside <span class="test">. When clicking on the <label>, the click event handler that you set up on the label will execute, then the click event handler set up on the <input> will execute when the label raises the click event on the <input>.

Well after reading my question again, I found a way how to solve it.

Just add "input" to the jQuery selector:

<script type="text/javascript">
$(document).ready(function() {
        $('.test input').click(function() {
                alert("click")
        })
});
</script>

$(document).ready(function() {
    $('.test').click(function(event) {
                    event.stopImmediatePropagation();
                    alert("Click");
                    })
                 }
              );

I was able to get my code working by stopping the event Propagation. It did not affect the status change of the checkbox.