The one of $('#test checkbox') is never called, because you don’t have a tag with name checkbox.
And depending if you click on checkbox or the label, the callback for $('#test label') is called once or twice cause of the bubbling because the input element is part of the label and is one union and therefore also received the event if the label is click (it is not bubbling, you can’t do event.stopPropagation()).
You can check this if you change your code this way:
$('#test label').live('click', function (event) {
event.stopPropagation(); //<-- has no effect to the described behavior
console.log(event.target.tagName);
});
Click on label:
LABEL
INPUT
Click on input:
INPUT
EDIT
If you only want to handle the click on the label and not the checkbox – and you can’t change your HTML structure – you can just ignore the event of the input element.
Either this way:
$('#test label').live('click', function (event) {
if( event.target.tagName === "LABEL" ) {
alert('clicked');
}
});
Or using jQuery to test:
$('#test label').live('click', function (event) {
if( $(event.target).is("label") ) {
alert('clicked');
}
});