Question

I have the problem with labels within buttons because a click on the label is also causing the button click to fire.

So I got two fired events after each other, what I don’t want of course.

My buttons with label included look like this:

<button id="b" name="Button" class="btn btn-primary btn-large">
    <label id="b_button_label" class="fontf">
        Click me
    </label>
</button>

Is there any quick solution, perhaps with jQuery, to prevent the double firing?

Answer 1

Yep, solution is not to put labels inside your buttons.

The labels are meant to describe the control itself, and clicks on a control’s label will act like a click on the control itself.

From the spec:

The label represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element’s labeled control, either using for attribute, or by putting the form control inside the label element itself.