function inside click() get executed after setting the element's click method

Question

<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
    <script>
        function show1(){
            $("#btn").click(show2());
            window.alert("1st show");
        }

    function show2(){
        $("#btn").click(show3());
        window.alert("2nd show");
    }

        function show3(){
            window.alert("3rd show");
        }


    </script>
    <button id="btn" onclick="show1()">Show</button>

</body>
</html>

I dont understand the behavior of the code above. After setting the $("#btn").click(show2());, the function is executed even though I din't clicked the button. Why?

renakre · Accepted Answer · 2015-05-11 03:20:16Z

1

Since these are callbacks, you need to follow this

$("#btn").click(show2);

or this

$("#btn").click(function(){ show2(); });

Otherwise, if you use show2(), you will invoke the function because it will not be a reference to the function.

answered May 11, 2015 at 3:20

renakre

8,3318 gold badges55 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2015-05-11 03:19:47Z

1

You need to pass a function reference as the event handler, in your case you are invoking the handle function and is passing the value returned by it as the handler

$("#btn").click(show2);//no () at the end

Demo: Fiddle

answered May 11, 2015 at 3:19

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Anik Islam Abhi · Accepted Answer · 2015-05-11 03:20:44Z

1

Try like this

function show1(){
            $("#btn").click(show2);
            window.alert("1st show");
}
 function show2(){
        window.alert("2nd show");
}

Try to catch event by using .on

function show1(){
                $("#btn").on("click",show2);
                window.alert("1st show");
    }
     function show2(){
            window.alert("2nd show");
    }

answered May 11, 2015 at 3:20

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Collectives™ on Stack Overflow

function inside click() get executed after setting the element's click method

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related