Jquery click functions runs before clicking

Question

I want my jquery to load a function when a button is clicked.

This works fine:

$(document).ready(function() {
  $("#register").click(function() {
    alert("button");
});

This one will show the test() function before the document loads:

$(document).ready(function() {

  function test(param1, param2){
    alert("param1: "+param1+" param2: "+param2);
  }

  $("#register").click(test("a","b"));

});

How can i fix this ?

The `ready` handler indicates that document **has been loaded**. Why do you think it's not? — Artyom Neustroev, Apr 08 '14 at 04:44
`foo(bar())` will `bar` first and pass the return value to `foo`. Arguments are **always** evaluated first, that's how JavaScript works. There is no hidden magic for event handlers (which is a good thing). — Felix Kling, Apr 08 '14 at 04:51
possible duplicate of [Why does click event handler fire immediately upon page load?](http://stackoverflow.com/questions/7102413/why-does-click-event-handler-fire-immediately-upon-page-load) — Felix Kling, Apr 08 '14 at 04:53
@FelixKling Is that why the code loaded the `test()` in this example before I click the button? — Muz, Apr 08 '14 at 06:31

Amit Joki · Accepted Answer · 2014-04-08T04:53:10.717

$(document).ready(function() {
  $("#register").click(function() {
    alert("button 
});

should be:

$(document).ready(function () {
    $("#register").click(function () {
        alert("button");
    });
});

And

$(document).ready(function() {
  function test(param1, param2){
    alert("param1: "+param1+" param2: "+param2);
  }
  $("#register").click(test("a","b"));    
});

should be

$(document).ready(function () {
    function test(param1, param2) {
        alert("param1: " + param1 + " param2: " + param2);
    }
    $("#register").click(function () {
        test("a", "b");
    });
});

$(document).ready() fires once the DOM is ready.

I think your problem is in this code:

 $("#register").click(test("a","b")); // I suppose it is executing test().

Haha, sorry, copy and paste typo on the first one. Thanks! This was my problem. I misunderstood JS syntax because `$("#register").click(test)` works fine. — Muz, Apr 08 '14 at 06:30

score 2 · Answer 2 · edited May 23 '17 at 11:46

2

you just pass the parameters through event handler like this.t allows you to pass a data map to the event object that automatically gets fed back to the event handler function by jQuery as the first parameter. The data map would be handed to the .click() function as the first parameter, followed by the event handler function.

$(document).ready(function() {

  function test(e){
    alert(e.data.param1); //  returns "a"
    alert(e.data.param2); //  returns "b"
  }

  $("#register").click({param1 : "a" , param2 : "b"} , test);

});

More you want about event Handler Stack Overflow

edited May 23 '17 at 11:46

Community

1
1

answered Apr 08 '14 at 04:58

Sudharsan S

15,336
3
31
49

You might want to add some explanation and not just throw a code snippet at the OP. – Felix Kling Apr 08 '14 at 04:58

score 1 · Answer 3 · answered Apr 08 '14 at 05:58

The problem is in your click event handler. This is what you have:

$("#register").click(test("a","b"));

Here you are immediately executing the test("a","b") function. Instead you want to pass in a function that calls this. Therefore the corrected code is

$("#register").click(function (){
    test("a","b");
});

Jquery click functions runs before clicking

3 Answers3