Why is jQuery click-event triggered when page loaded?

Question

I have the following code.... When the page is loaded myFunc() is called even if I dont click in my div. Why? The function declared "inline" is not triggered...hmmmm........

<div id="map" style="background: green; height: 100px"></div>

<script type="text/javascript">
    function myFunc() {
        alert("allways triggered when page loads...");
    };

    $(document).ready(function() {

    $("#map").click(myFunc());
    $("#map").click(function() { alert("not triggered") });

    });
</script>

Answer 1

Because of your code:

 $("#map").click(myFunc());

is wrong and has to be:

$("#map").click(myFunc);

Your code would call myFunc() first and than simulate a onclick event.

As seen in the documentation:

What you did is this: (as myFunc returns null)

click( )

Triggers the click event of each matched element. Causes all of the functions that have been bound to that click event to be executed. To trigger the click event on all of the paragraphs on the page: $("p").click();

What you want is this:

click( fn ) Binds a function to the click event of each matched element. The click event fires when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location. The sequence of these events is:

Answer 2

With the myFunc() in $("#map").click(myFunc()) you’re calling the function references by myFunc and only its return value is passed to $("#map").click. If you want to pass the myFunc function itself, leave the parenthesis away and use just the function name:

$("#map").click(myFunc);

Answer 3

Should be

$("#map").click(myFunc);

This way, you give the function as a parameter. $("#map").click(myFunc()); triggered the function, and gives its result as a parameter.

Answer 4

You're calling your function in your click event handler. Do this instead:

<script type="text/javascript">
    function myFunc() {
        alert("allways triggered when page loads...");
    };

    $(document).ready(function() {

    $("#map").click(myFunc);
    $("#map").click(function() { alert("not triggered") });

    });
</script>

You only pass the name of the function, without parenthesis, when passing it as an argument to an event handler (or any other function).

Answer 5

should be

$("#map").click(myFunc);

and not

$("#map").click(myFunc());

passing myFunc() instead of myFunc actually invoke this function

Answer 6

That is expected from your code because here:

$("#map").click(myFunc());

The parentheses () after the function will cause it to be called.

Try this instead:

<script type="text/javascript">
    var myFunc = function() {
        alert("allways triggered when page loads...");
    };

    $(document).ready(function() {

    $("#map").click(myFunc);
    $("#map").click(function() { alert("not triggered") });

    });
</script>

Answer 7

$("#map").click(myFunc);

NOT

$("#map").click(myFunc());