Jquery .click triggering on body load

Question

On body load, the button click is triggered. This behavior is unwanted. What is causing the function to trigger?

<!doctype html>
<html>
  <head>
  <body onload="init()">
    <div class="btn"><button type="button" class="btn" id="reset" style="font-size:60px;">Reset</button></div>
    <script>
      function init() {
      $("#reset").click(sendStatus());
    }

    // FUNCTIONS 
    function sendStatus (){
      console.log("foo");
      }
    </script>  
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  </body>
</html>

It's because you're passing the *result* of the function to the handler, not the *reference* of the function. Try `$("#reset").click(sendStatus);`. You should also place your code in a `$(document).ready(fn)` block instead of using an outdated `onload` attribute. — Rory McCrossan, Feb 09 '16 at 16:36

score 0 · Answer 1 · answered Feb 09 '16 at 16:36

0

You have a click event within the init function. You are calling that function within the onload attribute in the body tag.

answered Feb 09 '16 at 16:36

Tim Wilson

169
6

score 0 · Answer 2 · edited May 23 '17 at 12:07

There are few fundamental issues with your code.

There is no document.ready function. Please use this instead of onload. Refer the below links to know the difference.

window.onload vs $(document).ready()

jQuery - What are differences between $(document).ready and $(window).load?

In init function button click event, you are calling the function "sendStatus" instead of assigning it. Hence it is getting triggered immediately

I have modified the code as follows

 $(function() {

   function init() {
     $("#reset").click(sendStatus);
   }

   // FUNCTIONS 
   function sendStatus() {
     console.log("foo");
   }

     init();

 });

and here is the fiddle. https://jsfiddle.net/7nt4q6yt/1/

Jquery .click triggering on body load

2 Answers2