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

发布于 2024-11-16 21:41:32 字数 3256 浏览 5 评论 0原文

我使用 Jquery 开发 ASP.NET 应用程序。 Jquery 非常强大，我经常使用它。在我的母版页中，我包含了我使用的所有库和一个 js 文件，其中包含可用于所有应用程序（界面交互）的 jquery 代码。在这个js文件（Main.js）中，我做了一些事情，所以我使用 $(document).ready( ... etc .. )

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

我的asp控件用这种方法有很多问题，自动回发控件不执行自动回发。我认为这是多个$(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>

原文

I work on a ASP.NET application using Jquery. Jquery is really powerfull and I use a lot of it.
In my master page I include all libraries I use and a js file who contain the jquery code available for all the application (interface interactions). In this js File (Main.js) I make some things so I use the $(document).ready( ... etc .. )

But in some pages, who are more complex I need to use some other jquery code.. So I add some head Content with other script tag.. And this the problem, I have to add the $(document).ready() instruction again.

There is a lot of problems with my asp controls with this way to do, the autopostback controls doesn't do their autopostback.. I think this is a problem with the multiple $(document).ready() declaration because when I remove the second one(in the page not in the master page) the controls are working.

So how can I do to add some javascript code in a specific page without multiple $(document).ready() declaration. (I don't want to embed all the jquery code in all pages).

I hope I'm clear enough, thanks for responses

Edit here is code

Master page part

<%@ 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......

});

And A page

<%@ 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空心↖ 2024-11-23 21:41:32

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>

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>

回复收藏 0 原文

长安忆 2024-11-23 21:41:32

答案就在你的问题中：

但是在一些更复杂的页面中，我需要使用其他一些jquery代码..所以我添加一些带有其他脚本标记的head内容..这就是问题，我必须添加$(document).ready () 再次指令。
“但在某些页面...”

不幸的是，您必须为每个引用不常见元素的 js 文件添加引用。也就是说，如果您的第 1 页包含

，另一个页面（第 2 页）包含

> 您不想将 Jquery 处理中的所有内容都包含到 Main.js 中。事实上，如果你还没有看到第 2 页，那会出现错误。

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

回复收藏 0 原文

神魇的王 2024-11-23 21:41:32

好吧，另一种方法是将所有 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

well an alternative is to move all of you jquery document ready to the bottom of your page

<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>

So in effect you are using document.ready when all other elements are ready :) PS

回复收藏 0 原文

小清晰的声音 2024-11-23 21:41:32

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

对于初学者，我会仔细检查我的语法，并确保所有块都正确封装，所有语句都以 ; 结尾，以及所有这些爵士乐。

回复收藏 0 原文

~没有更多了~