在内容页面中，jquery 文档就绪事件在内容页面加载之前触发答案

【问题标题】：In content page, the jquery document ready event fires before the content page is loaded在内容页面中，jquery 文档就绪事件在内容页面加载之前触发
【发布时间】：2014-03-17 04:46:41
【问题描述】：

我有一个引用 jquery + jqueryui 的母版页。一切都很好。在我放置的内容页面中：

  $(document).ready(function () {
        $("#tabs").tabs();
    });

事实证明，ready 事件在内容页面的 html 加载之前触发：/。那么，如何判断整个内容页面的加载时间呢？

编辑这是我的标记：

母版页：

<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
  <Scripts>
    <asp:ScriptReference Path="~/Scripts/jquery-1.4.1-vsdoc.js" />
    <asp:ScriptReference Path="~/Scripts/jquery-ui-1.8.2.custom.min.js" />
  </Scripts>
</asp:ScriptManager>

内容页面：

<div id="tabs">
    <div id="whatWorkedWellDiv">
        <fieldset>
            <legend>What Worked Well</legend>
            <br />
            <label for="user">
                Name</label>
            <input type="text" name="user" value="" /><br />
            <label for="emailaddress">
                Email Address:</label>
            <input type="text" name="emailaddress" value="" /><br />
            <label for="comments">
                Comments:</label>
            <textarea name="comments"></textarea><br />
            <label for="terms">
                Agree to Terms?</label>
            <input type="checkbox" name="terms" class="boxes" /><br />
            <input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
        </fieldset>
    </div>
    <div id="whatCouldHaveGoneBetterDiv">
        <fieldset>
            <legend>What could have gone better</legend>
            <br />
            <label for="user">
                Name</label>
            <input type="text" name="user" value="" /><br />
            <label for="emailaddress">
                Email Address:</label>
            <input type="text" name="emailaddress" value="" /><br />
            <label for="comments">
                Comments:</label>
            <textarea name="comments"></textarea><br />
            <label for="terms">
                Agree to Terms?</label>
            <input type="checkbox" name="terms" class="boxes" /><br />
            <input type="submit" name="submitbutton" id="submit1" value="Submit" />
        </fieldset>
    </div>
</div>

Jscript:

$(文档).ready(函数 () { $("#tabs").tabs(); });

【问题讨论】：

标签： jquery master

【解决方案1】：

如果您使用frames/iframes，这可能是可能的，因为.ready() 处理程序将在实际执行它的那个DOM 上触发。

另一种可能发生这种情况的方式是，如果您“后加载”您网站的某些部分 asyncronous。

无论如何，如果您的网站中有不同的 DOM，则需要在所有这些 DOM 中都有一个单独的 .ready() 处理程序。

如果您没有这些星座，请提供您的 html 标记。

【讨论】：

我已经用标记更新了我的问题。我没有做任何动态加载或框架/iframe...
@Vladimir：你在哪里插入你的javascript？您是否尝试在 .ready() 中执行简单的 alert() 或访问 DOM 元素？
javascript 被插入到一个单独的文件中。问题是文档就绪是在加载母版页时执行的，而不是在加载内容页时执行的。
@Vladimir - 你在使用更新面板吗？对于客户端来说，没有母版页的概念，它只是发送下来的一大块 HTML，不管服务器如何组装它。
嗯，看来jquery调用必须放在内容页面中所有div之后。

【解决方案2】：

我通过移动来完成这项工作

<script type="text/JavaScript" src="Scripts/DocumentReadyScript.js"></script>

来自

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

部分到

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">

部分

【讨论】：

【解决方案3】：

在您的 MasterPage 中尝试以下操作

<script language="javascript" type="text/javascript" src='<%=ResolveClientUrl("~/Scripts/jquery-1.4.2.min.js")%>'></script>

【讨论】：