CODEWITHSUNDEEP
javascriptjquery
Feirell
Feirell

Reputation: 799

jQuery dosn't work as expected with inline function

I tried to exclude the function (because I'm used to it from php), that should be triggered when you click on the p with the id test1.

I wrote following jQuery

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>click demo</title>
        <style>
            p {
            color: red;
            margin: 5px;
            cursor: pointer;
            }
            p:hover {
            background: yellow;
            }
        </style>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script>
            function test1(){
                $( this ).slideUp();
            }
            $(document).ready(function(){
                    $( "#test1" ).click(test1());
            });

        </script>
    </head>
    <body>
        <p id="test1" class="test2">First Paragraph</p>
        <p>Second Paragraph</p>
        <p>Yet one more Paragraph</p>
    </body>
</html>

The given example works fine with the inline formatting, but not when I write it this way. Can someone tell me why why it does not work ?

Upvotes: 0

Views: 94

Answers (2)

Muhammad Waqas
Muhammad Waqas

Reputation: 1150

you can do this with defining function 

  $(document).ready(function(){
                $( "#test1" ).click(function(){
                $( this ).slideUp();
                });
        });

Upvotes: 0

KJ Price
KJ Price

Reputation: 5984

You are calling your function immediately. What you want to do is pass the reference of your function (without calling it). Try this instead:

$( "#test1" ).click(test1);

Upvotes: 5

Related Questions