when has a function to be in $(document).ready()

前端未结

关注

 2  739

悲哀的现实

I just don\'t get it. I searched and searched but for this I just can\'t figure out what\'s \"right\".

There are three examples.

1) Fiddle 1.0 Here we have

相关标签:

2条回答

感情败类

2021-02-15 02:10

In JavaScript, scope is handled on a per-function basis. Anything in scope of a function can access other things in scope of that function and things in a wider scope.

Defining a variable with var inside a function will limit the scope of that variable to the function.

Defining a function with a function declaration inside another function will limit the scope of the defined function to the container function.

When you use ready, you pass a function to it. Anything defined in that function is, of course, scoped to that function. Since it is scoped to that function, it is not a global. Your onclick attribute isn't defined in the scope of that function, it can only access globals. This is why you get a reference error.

Avoid globals. They make things hard to maintain. Avoid onclick attributes, they usually depend on globals.

You need to use ready if you want code to run after the DOM has been fully constructed. This is useful if you want to bind event handlers to elements in it with JS (e.g. with jQuery.on). Do this rather then using onclick attributes.

0 讨论(0)
发布评论:

提交评论
- 加载中...
庸人自扰

2021-02-15 02:25
A lot of what you're seeing is because of jsFiddle's very surprising default setting, which is to wrap the code in the script pane in an onload handler. So your code is wrapped in a function and no longer at global scope (which is where functions need to be if you use onclick-style attributes). You can change this with the drop-down box on the left (the second one, under the list of libraries and scripts). Change it to "no wrap" to have unwrapped code.

You're not (by far!) the first to be bit by this surprising default.

Answering your main question:

when has a function to be in $(document).ready()

If you control where the script tags loading your script go, you basically never have to use ready; instead, just make sure your script tags are at the end of the HTML, just before the closing </body>.

You can use ready, of course. The reason for doing so is to make sure that all the DOM elements have been created before your code runs. But if you put your script tag at the end, that's already true. You can still define your functions outside of the ready handler (if you want them to be globals), but if you're using ready, you would call them from the ready handler so the elements exist.

FWIW, I would avoid using onclick-style attributes for hooking up event handlers, primarily because they require you to create global functions. I prefer to avoid creating any global symbols when I can avoid it.

The general form I'd recommend:
```

<script src="any_libraries_you_need_if_you_are_not_combining.js"></script>
<script src="your_script.js"></script>
</body>
</html>
```
where your script looks like this:
```
(function($) { // A scoping function that wraps everything
    // Hook up event handlers here. You can use `$` for jQuery, even if
    // you've used noConflict, because we have a private `$` symbol (see
    // the `$` argument above)

    // The body of your code goes here

})(jQuery); // <== Note how we're passing the jQuery reference in
            // and immediately executing the scoping function
```
Here's a complete example: Live Copy
```
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Script Placement Example</title>
</head>
<body>
  <input type="button" class="hello-button" value="Click me">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script>
    // This would be in a file, rather than inline
    (function($) {
      // Hook up handlers
      $(".hello-button").click(sayHello);

      // Body of the code
      function sayHello() {
        $("<p>Hello!</p>").appendTo(document.body);
      }
    })(jQuery);
  </script>
</body>
</html>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...