Q:

Why do  in  trigger click twice?

For some reason, I have nested two buttons in a label. Each button will trigger some logic. But somehow I found the second button would trigger the logic of both buttons (Tested in FF and Safari on Mac. It works in Chrome, but when mouse down on the second button, both buttons will present as if they are pressed.)
Here is a very simple sample to reproduce the problem.
HTML:
<label>
    abc
    <button type="button">button1</button>
    <button type="button">button2</button>
</label>

JS:
$(function(){
    $('button').on('click', function(){
        alert($(this).text());
    });
});

When click on button1, all good.
When click on button2, you will see that button2's alert shows up followed by button1's.
Can anyone advise why this is happening?
http://jsfiddle.net/3X66R/
Add:

The easiest solution might be moving buttons out of the label. But I don't understand the rationale behind it and am eager to know what is happening here.
I think this is something standard in HTML and SHOULD happen across all browsers. But somehow Chrome has done something special to prevent it. But as you see the clicking state still shows that both buttons have been triggered. 

A:

Use this: 
$(function(){
    $('button').on('click', function(e){
        e.preventDefault();
        alert($(this).text());
    });
});

Its not working after clicking on first button and then on second button, event is bubbling to click on button 2, but after implement preventDefault() its working fine.

A:

The reason this happens is because labels work as a focus control. If you put a textbox in it; it will get focus if you click the textbox or the label. Since it sees button 1 as its focus control it will get triggered by a click on the label. Button 2 is a child of the label too, so this will trigger a event on the label and by that the event on button 1 aswell
If you move one button out of the label it will work, or a prevent default will do fine too
Edit: use of labels

