Why is jQuery click-event triggered when page load

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

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 2

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 3

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

NOT

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

Answer 4

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 5

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 6

should be

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

and not

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

passing myFunc() instead of myFunc actually invoke this function