Can you have multiple $(document).ready(function(){ … }); sections?

前端未结

关注

 11  1223

If I have a lot of functions on startup do they all have to be under one single:

$(document).ready(function() {

or can I have multiple such

相关标签:

11条回答

栀梦

2020-11-22 13:43

Yes, it's perfectly ok.but avoid doing it without a reason. For example I used it to declare global site rules seperately than indivual pages when my javascript files were generated dynamically but if you just keep doing it over and over it will make it hard to read.

Also you can not access some methods from another jQuery(function(){}); call so that's another reason you don't wanna do that.

With the old window.onload though you will replace the old one every time you specified a function.

0 讨论(0)
发布评论:

提交评论
- 加载中...
难免孤独

2020-11-22 13:49

Yes you can easily have multiple blocks. Just be careful with dependencies between them as the evaluation order might not be what you expect.

0 讨论(0)
发布评论:

提交评论
- 加载中...
花落未央

2020-11-22 13:50
Yes it is possible but you can better use a div #mydiv and use both
```
$(document).ready(function(){});

//and

$("#mydiv").ready(function(){});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
离开以前

2020-11-22 13:50
You can also do it the following way:
```
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
 $(document).ready(function(){
     $("#hide").click(function(){
     $("#test").hide();
     });
     $("#show").click(function(){
     $("#test").show();
     });
 });
</script>
</head>

<body>
<h2>This is a test of jQuery!</h2>
<p id="test">This is a hidden paragraph.</p>
<button id="hide">Click me to hide</button>
<button id="show">Click me to show</button>
</body>
```
the previous answers showed using multiple named functions inside a single .ready block, or a single unnamed function in the .ready block, with another named function outside the .ready block. I found this question while researching if there was a way to have multiple unnamed functions inside the .ready block - I could not get the syntax correct. I finally figured it out, and hoped that by posting my test code I would help others looking for the answer to the same question I had
0 讨论(0)
发布评论:

提交评论
- 加载中...

日久生厌

2020-11-22 13:52

You can even nest document ready functions inside included html files. Here's an example using jquery:

File: test_main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>

<body>
    <div id="main-container">
        <h1>test_main.html</h1>
    </div>

<script>
    $(document).ready( function()
    {
        console.log( 'test_main.html READY' );
        $("#main-container").load("test_embed.html");
    } );
</script>

</body>
</html>

File: test_embed.html

<h1>test_embed.html</h1>
<script>
    $(document).ready( function()
    {
        console.log( 'test_embed.html READY' );
    } );
</script>

Console output:

test_main.html READY                       test_main.html:15
test_embed.html READY                      (program):4

Browser shows:

test_embed.html

0 讨论(0)

上一页 1 2