如何避免多个$(document).ready()

本文关键字：document ready 何避免 | 更新日期: 2023-09-27 18:00:30

我使用Jquery开发ASP.NET应用程序。Jquery真的很强大，我用了很多。在我的主页中，我包含了我使用的所有库和一个js文件，该文件包含可用于所有应用程序（接口交互）的jquery代码。在这个js文件（Main.js）中，我做了一些东西，所以我使用了$(document).ready( ... etc .. )

但在一些更复杂的页面中，我需要使用其他一些jquery代码。。所以我添加了一些头部内容和其他脚本标记。。而这个问题，我不得不再次添加$(document).ready()指令。

用这种方式，我的asp控件有很多问题，autopostback控件不执行它们的autopostback。。我认为这是多重$(document).ready()声明的一个问题，因为当我删除第二个声明（在页面中而不是在母版页中）时，控件正在工作。

那么，如何在没有多个$(document).ready()声明的情况下在特定页面中添加一些javascript代码呢。（我不想在所有页面中嵌入所有jquery代码）。

我希望我足够清楚，感谢的回复

编辑这里是代码

主页面部分

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <link href="Styles/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css" />
    <link href="Styles/menu.css" rel="stylesheet" type="text/css" />
    <script src="/js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="/js/jquery-ui-1.8.7.custom.min.js" type="text/javascript"></script>
    <script src="/js/jquery.cookie.js" type="text/javascript"></script>
    <script src="/js/jquery.ui.datepicker-fr.js" type="text/javascript"></script>
    <script src="/js/jquery.color.js" type="text/javascript"></script>  
    <script src="/js/Menu.js" type="text/javascript"></script>
    <script src="/js/iphone-style-checkboxes.js" type="text/javascript"></script>  
    <script src="/js/jquery.tools.min.js" type="text/javascript"></script>      
    <script src="/js/Main.js" type="text/javascript"></script>                   
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
Some content....
</body>
</html>

Main.js

$(document).ready(function () {
/// <reference path="jquery-1.4.4-vsdoc.js" />
//There is a lot of content here......

})；

和一页

<%@ Page MasterPageFile="~/Site.master" Language="C#" AutoEventWireup="true" CodeBehind="Dep.aspx.cs" Inherits="Dep" %>
<asp:Content ID="HeadContent1" ContentPlaceHolderID="HeadContent" runat="server">
<link href="../../Styles/nyroModal.css" rel="stylesheet" type="text/css" />
<script src="../../js/jquery.nyroModal.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">    
    $(document).ready(function () {
        $('#tbxDateDebut').datepicker();
        $('#tbxDateFin').datepicker();
        $('.nyroModal').nyroModal();
    });
</script>

</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
//Here comes the controls... (lot of code)       

</asp:Content>

如何避免多个$(document).ready()

main.js

$(document).ready(function () {
  //There is a lot of content here......
  if ($.pageReady) $.pageReady($);
});

page.js

<script type="text/javascript">
  $.pageReady = function() {
    // fired on DOM ready
  }
</script>

答案就在你的问题中：

但在一些更复杂的页面中，我需要使用其他一些jquery代码。。所以我添加了一些头部内容和其他脚本标记。。这就是问题所在，我必须再次添加$（document）.ready（）指令。

"但在某些页面中"

不幸的是，您必须为每个引用不常见元素的js文件添加一个引用。也就是说，如果你有一个<div id="element1">的页面1和另一个<div id="element676">的页面（页面2），你不想把Jquery处理中的所有内容都包含在Main.js中。事实上，如果你还没有看到页面2，那就会出现错误。

该死的，你们太快了。。。。在我写的时候@Raynos给出了正确的答案。

一个替代方案是将所有jquery文档移动到页面的底部

<body>
... here goes your other html ....
<script>
//$(document).ready(function(){//this is not needed
   ... here goes the first ready...
//});//this is not needed
//$(document).ready(function(){//this is not needed
   ... here goes the second ready ... and so on...
//});//this is not needed
</script>
</body>

因此，实际上，当所有其他元素都准备好时，您正在使用document.ready：）PS

我倾向于认为，除了您的多个$(document).ready()调用之外，还有一些东西在起作用。AFAIK，针对$(document).ready()（甚至是像$('#someid').ready()这样的冒泡版本）的多个调用不应该引起问题，因为它们都是由jQuery为您静默地聚合在一起的。

首先，我会仔细检查我的语法，并确保所有的块都被正确封装，所有的语句都以;结尾，以及所有这些jazz。

相关文章：