ansaurus

Question

problem with "Button" and ":button" selectors

Answer 1

+4 A:

:button will match inputs of type button as well as button elements. Button will match only button elements. So, the Button element in your document gets two handlers bound to its click event since it is being selected by both selectors.

Proof: http://jsfiddle.net/g7deV/

(When you click on 'hide me quick', both alerts will pop up. If you change the order of event handlers, both alerts will still pop up, only in the reverse order)

karim79 2010-07-06 13:32:54

Thanks a lot! That's a great explanation with simple example.

lucky 2010-07-06 13:45:07

Answer 2

+1 A:

I would use a more specific selector for something like this. give your buttons id's or a class and use that to attach the handlers! like so:

<script>
$(function(){
    $('#button1').click(function(){
        $(this).parents(".ex").hide("slow");

    });
});

</script>

Patricia 2010-07-06 13:36:07

Answer 3

+2 A:

From the jQuery documentation for the :button selector:

Description: Selects all button elements and elements of type button.

So your button element will have two click event handlers attached to it. Event handlers are executed in the order they're added, so in your original code, the "quick" handler is executed first. When you change the order of the event handlers, you also change the order in which they are executed, so the "slow" event handler will be executed first.

Pär Wieslander 2010-07-06 13:37:27

+1 for explaining *why* two event handlers on the object produced this result.

Chris 2010-07-06 13:42:13

+1 Thanku for explaning in detail.

lucky 2010-07-07 06:31:46

ansaurus

tags:

views:

answers:

problem with "Button" and ":button" selectors

related questions