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 ?

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 ?

• javascript
• jquery

• The ready handler indicates that document has been loaded. Why do you think it's not? – Artyom Neustroev Commented Apr 8, 2014 at 4: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 Commented Apr 8, 2014 at 4:51
• possible duplicate of Why does click event handler fire immediately upon page load? – Felix Kling Commented Apr 8, 2014 at 4:53
• @FelixKling Is that why the code loaded the test() in this example before I click the button? – Muz Commented Apr 8, 2014 at 6:31

3 Answers 3

$(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().

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

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");
});