如何避免多个$(文档).ready()

时间:2011-06-24 11:44:24

标签: c# jquery asp.net code-organization

我使用Jquery在ASP.NET应用程序上工作。 Jquery非常强大,我使用了很多。 在我的母版页中,我包含了我使用的所有库以及包含可用于所有应用程序的jquery代码的js文件(界面交互)。在这个js文件(Main.js)中,我做了一些事情,所以我使用了$(document).ready( ... etc .. )

但是在某些页面中,谁更复杂,我需要使用其他一些jquery代码..所以我添加一些头部内容与其他脚本标签..这就是问题,我必须添加$(document).ready()指令试。

使用这种方法我的asp控件有很多问题,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>

4 个答案:

答案 0 :(得分:6)

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>

答案 1 :(得分:1)

答案在你的问题中:

  

但是在某些页面中,谁更复杂我需要使用其他一些jquery代码..所以我添加一些头部内容与其他脚本标签..而这个问题,我必须添加$(文件).ready ()再次指示。

     

“但在某些页面......”

不幸的是,您必须为每个引用非常见元素的js文件添加引用。也就是说,如果您的第1页包含<div id="element1">而另一个页面(第2页)包含<div id="element676">,则您不希望将所有Jquery处理包含在Main.js中。事实上,如果您还没有看过第2页,那就会出错。

该死的你们很快......在我写作时,@ Raynos给出了正确答案。

答案 2 :(得分:0)

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

答案 3 :(得分:0)

我倾向于认为除了你的多个$(document).ready()电话之外,还有其他工作要做。 AFAIK,针对$(document).ready()的多次调用(甚至是冒泡版本,如$('#someid').ready())不应该导致问题,因为它们都是由jQuery默默地聚合在一起的。

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