7

这里是现场：一个包含 html 并使用 jQuery 库和选项卡的页面 当单击某个选项卡时，jQuery UI 插件会加载另一个页面。问题是，当页面/html被加载/渲染时（让我们简化一下，说它只是在做类似 $("#myDiv").load(url); 之类的事情），就绪事件当然不会被触发，因为“ window" 已经加载并触发了 load 事件。这意味着我想在页面加载（部分加载）时执行的任何 jQuery 操作都不会执行。UI.tabs 插件旨在将页面加载到其他选项卡中，我们可以假设其他页面可能包含自己的 jQuery ......所以应该有一些方法可以解决这个问题......

我可以想出非常可怕的方法来解决这个问题，比如在页面底部有一个脚本块正在渲染（加载到一个 div 中），它可以完成我在 ready 被触发时会做的所有事情（你可以假设浏览器如果脚本块被命中，已经渲染了页面）。然而，这是非常糟糕的做法。有什么建议么？

4

5 回答 5

5

您如何向服务器发送 AJAX 请求？如果您使用的是 ASP.NET AJAX，那么 Brian Hasden 的答案就是您正在寻找的。如果您使用 jQuery 发送请求，那么您可以使用 load 函数设置回调。

$(".ajaxLink").load(url, null, function() {
    // code here
});

load() 文档

或者设置一个全局 ajaxComplete 事件，该事件在每次 ajax 调用完成时触发。

$(document).ajaxComplete(function() {
    // code here
});

ajaxComplete() 文档

于 2009-12-09T17:46:02.900 回答
2

好的..所以我现在对这个问题有一个简单的答案，这应该意味着最少的代码更改。我们可以使用来自mkedobbs的建议，而不是具有响应 $(document).ready 的 js 包含（本质上是客户端行为模型）的子视图（这些是没有 html、head 或 body 标记的真实 aspx 视图）提供类似的东西。简单地：

$("#MyDiv").load("page.htm", null, function(){ $(document).trigger("PartialLoaded"); });

然后在子视图中 js 包括

$(document).bind("PartialLoaded", function(){ .........});
于 2009-12-10T13:29:51.997 回答
2

load 方法提供了一个回调，该回调在内容加载后执行。

$("#myDiv").load(url, null, function() { 
   //do your stuff here 
});

jQuery.com 上的完整文档和示例：http: //docs.jquery.com/Ajax/load

于 2009-12-09T17:42:09.520 回答
1

好吧 - 我正在使用带有 jQ​​uery 的 ASP.NET MVC。我没有对应用程序的这一部分使用部分视图（ascx），而是唱完整视图，但将它们加载到 div 中。因此，我有一个主视图，其中包含一些对 js 文件的引用，该文件是这种“类型”视图的客户端逻辑。当单击此视图上的某个选项卡时，我们使用 jquery 选项卡将另一个视图“加载”到某个 div 中。使用此插件加载选项卡的方式是简单地提供一个 url（而不是使用 load - 正如所指出的 - 我可以添加一个回调函数而不是依赖于 ready）。

然而。我不希望所有客户端逻辑都在某个父视图中，因为任何视图都应该能够通过 url 加载另一个视图（子视图包含指向其相关 js 文件的链接，该文件包含加载时格式化/连接的所有逻辑）。

现在让我真正感到困惑的是，它似乎在某些情况下有效，而在其他情况下则无效。例如 1) 当父视图在 IE 的框架中打开时，子视图准备就绪 2) 直接在 IE 中打开相同的 url 时，子视图准备就绪 3) 在 FFX2 中打开相同的 URL 时准备好每个都不会触发 4) 最后.. 但是当在 FFX2 中打开该父级的子视图（具有子视图）时，触发了子就绪事件！.. 莫名其妙..

我要运行一些测试然后回复你，但是任何关于为什么这种行为可能不同的建议将不胜感激

更新：啊哈！..看起来即使清除了上述障碍，也存在浏览器差异（显然来自上面的阅读）..下面的简单测试在 IE7 中运行良好，但在 FFX2 中失败。将 Test2.htm 加载到 Test1.htm 时，会在 IE 中触发 ready 事件，但不会在 FFX 中触发。根据经验，我知道这意味着 IE 有一个“怪癖”，而 FFX 正在按照您所期望的基于 W3C 的方式工作。所以看起来这种方法是不可以的，除非有人有任何建议？：

测试1.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org        /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.3.2.js">    </script>
    <script type="text/javascript" language="javascript">
    <!--
        $(document).ready(function() {
            alert("Test1.htm");
            $("#Test1").load("Test2.htm");
        });
    //-->
    </script>
</head>
<body>
    <h3>SOME TEST</h3>
    <div id="Test1">EMPTY</div>
</body>
</html>

测试2.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org        /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.3.2.js">    </script>
    <script type="text/javascript" language="javascript">
    <!--
        $(document).ready(function() {
            alert("Test2.htm");
            //$("#Test1").load("Test3.htm"); // load more
        });
    //-->
    </script>
</head>
<body>
    <h3>SOME TEST</h3>
    <div id="Test2">EMPTY</div>
</body>
</html>
于 2009-12-10T09:49:04.200 回答
-1

我相信你可以做这样的事情（从ASP.NET派生）：

<script type=”text/javascript”&gt;
     <!--
     Sys.WebForms.PageRequestManager.getInstance().add_EndRequest(Request_End);
     function Request_End(sender, args)
     {
          // Insert code you want to occur after partial page load here
     }
     // -->
</script>

哪个应该挂钩包含部分页面更新的结束请求事件。您显然会更新上面的示例以调用您想要的适当的 JS 函数。

于 2009-12-09T17:39:19.183 回答