All geek questions in one place

Problem with selectors "Button" and ": button"

I am new to jQuery and in the learning phase. I wrote a test program in it.

<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("Button").click(function(){ $(this).parents(".ex").hide(); }); $(":button").click(function(){ $(this).parents(".ex").hide("slow"); }); }); </script> <style type="text/css"> .ex{ background-color: #e5eecc; padding: 7px; border: solid 1px #c3c3c3; } </style> </head> <body> <h3>Island Trading</h3> <div class="ex"> <input type="button" name="hid" value="Hide Me slowly"> <p> Contact: Helen Bennett</p> <p>Garden House Crowther Way</p> <p>London</p> </div> <h3>Paris spécialités</h3> <div class="ex"> <button type="button">Hide Me Quick</button> <p> Contact: Marie Bertrand</p> <p>265, Boulevard Charonne</p> <p>Paris</p> </div> </body> </html>

This works as expected. Whenever I click Hide me slowly , it hides slowly. Since the event with the ": button" selector asks to do this. as well as for Hide me Quick - the "Button" selector, it quickly hides.

But as soon as I reorder the event handling functions in the script, both of them are hidden slowly. Code change in

 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(":button").click(function(){ $(this).parents(".ex").hide("slow"); }); $("Button").click(function(){ $(this).parents(".ex").hide(); }); }); </script>

My question is: I did not change the selectors, only the order is changed. For the "Button" selector, I have an event handling function that only hides and does not indicate "slow." But then he hides slowly. can you look into it and tell me why?

+4
source share
3 answers

:button will match the inputs of the type button as well as the buttons. Button will correspond only to button elements. Thus, the Button element in your document receives two handlers attached to its click event, since it is selected by two selectors.

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

(When you click Hide Me Quickly, both warnings will appear. If you change the order of the event handlers, both alerts will pop up, only in the reverse order)

+4
source

From jQuery documentation for button selector ::

Description: Selects all button elements and type button elements.

That way, your button element will have two click event handlers attached to it. Event handlers are executed in the order in which they are added; therefore, a “fast” handler is executed in the source code. When you change the order of event handlers, you also change the order of their execution, so the "slow" event handler is executed first.

+2
source

I would use a more specific selector for something like this. enter button identifiers or a class and use them to attach handlers! like this:

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

Source: https://habr.com/ru/post/1314836/

More articles:


All Articles