Home/ Questions/Q 891253
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T13:51:36+00:00

I am new to Jquery and in learning phase. I have written a test

  • 0

I am new to Jquery and in learning phase.
I have written 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 is working as expected. Whenever i click Hide me slowly, it is hidden slowly. As the event with the selector “:button” asks to do so. and
similarly for Hide me Quick — the selector is “Button”, it is hidden quickly.

But once i change the order of the event handling functions in the script, both of them are hidden slowly.
Change in code 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 changed the selectors only the order is modified. For the selector “Button” i have written event handling function to only hide and did not specified “slow”. But then it is hiding slowly. can you please look into it and let me know why?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    :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)

    • 0