Why can't I use onClick to execute a function inside a jQuery $(document).ready function?

Asked
Active3 hr before
Viewed126 times

6 Answers

inside
90%

(yes, the onClick is not really the jQuery way of doing it and probably should be replaced by a click handler defined in the ready function, but it works and is allowed.,Either you should use a function expression or declare the function out of the ready function.,Yes, as mentioned by others you really need to move the function outside of the jquery ready declaration. Also please note that javascript is case sensitive, hence you should use onClick rather than onclick. Regards,Javascript has two kinds of scope, global, and function level. If you declare doIt inside a function, it will not be visible outside the function. There are a few ways to fix it

Binding it inside (remove your onclick="" for this):

$(document).ready(function() {
   alert('ready');
   $("input[name='Go']").click(doIt);

   function doIt() {
      alert('did it');
   }
});

or the anonymous version (again remove your onclick=""):

$(document).ready(function() {
   alert('ready');
   $("input[name='Go']").click(function() {
      alert('did it');
   });
});

Or move it outside (keep your onclick=""):

$(document).ready(function() {
   alert('ready');
});

function doIt() {
   alert('did it');
}
load more v
88%

I'm new to Javascript and jQuery. I want to click a button and have a js function executed. (For this example, it's just an alert, but it's actually an ajax function.) ,A better method is to insert a handler for your click event inside, then call that function there.,You define doIt in your document.ready as a function statement.,You need to move your function outside of the document.ready so it can be called by outside events.

Here's the relevant code:

$(document).ready(function()
{ 
    alert('ready');

    function doIt() {
        alert('did it');
    };
}
)

<body>
    <input name="Go" type="button" value="Go" onclick="doIt();"/>
</body>
load more v
72%

javascript - Functions inside or outside the jQuery document are ready , jQuery - Functions within the $(document). Ready function , javascript - The calling function in the jQuery document is ready , javascript - JQuery $(function() {}) and $(document). are you ready?

Here's the relevant code:

$(document).ready(function()
{ 
    alert('ready');

    function doIt() {
        alert('did it');
    };
}
)

<body>
    <input name="Go" type="button" value="Go" onclick="doIt();"/>
</body>
65%

I'm new to Javascript and jQuery. I want to click a button and have a js function executed. (For this example, it's just an alert, but it's actually an ajax function.) ,The first alert appears, but after I click the button, I never see the second ("did it") alert. It looks like javascript doesn't think the doIt() function is defined when the button is clicked.,You could simply call the second function at the end of the first.,This works because it will wait until firstFunction is done before it moves on to secondFunction fiddle

Here's the relevant code:

$(document).ready(function()
{ 
    alert('ready');

    function doIt() {
        alert('did it');
    };
}
)

<body>
    <input name="Go" type="button" value="Go" onclick="doIt();"/>
</body>
load more v
75%

The ready() method is used to make a function available after the document is loaded. Whatever code you write inside the $(document ).ready() method will run once the page DOM is ready to execute JavaScript code.,What is the difference between $(window).load() and $(document).ready() functions in jQuery?,Need Selenium to wait until the document is ready,You can try to run the following code to learn how to use $(document).ready() method in jQuery:

<html>

   <head>
      <title>jQuery Function</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

      <script>
        $(document).ready(function() {
          $("div").click(function() {
            alert("Hello, world!");
          });
        });
      </script>
   </head>
   
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>
40%

I identify as an attack helicopter!,Problems With JQuery Or AJAX Calling Code Behind Method , This post has been edited by laytonsdad: 20 August 2013 - 01:47 PM ,Using JQuery Datepicker With MVC3 And Razor


<script></script>

$("#buttonID").click(function() {})

            $(document).ready(function() {
               $("#buttonID").click(function() {})
            });
load more v

Other "inside-undefined" queries related to "Why can't I use onClick to execute a function inside a jQuery $(document).ready function?"