Question

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

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

Answer 1

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

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

load() Documentation

或设置每次ajax调用完成时触发的全局ajaxComplete事件。

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

ajaxComplete() Documentation

Answer 2

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

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

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

Answer 3

好吧 - 我正在使用带有jQuery的ASP.NET MVC。我不是在应用程序的这一部分使用局部视图（ascx），而是我唱全视图，但将它们加载到div中。所以我有一个带有头的主视图，其中有一些js文件的引用，这是这种“类型”视图的客户端逻辑。单击此视图上的某个选项卡时，我们使用jquery选项卡将antoher视图“加载”到某个div中。使用此插件加载选项卡的方式是简单地给出一个URL（而不是使用加载 - 正如所指出的那样 - 我可以添加一个回调函数而不是依赖于就绪）。

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

现在让我感到困惑的是，它似乎在某些情况下起作用而在其他情况下起作用;例如1）当在IE中的一个帧中打开父视图时，从不触发子视图readys 2）当直接在IE中打开相同的url时，子视图readys ARE触发3）当在FFX2中打开相同的URL时准备好每一个都不会被触发4）终于..但是当在FFX2中打开这个父级的子视图（有子视图）时，孩子就绪事件被触发了！..莫名其妙..

我要做一些测试然后回到你身边，但是对于为什么这种行为可能会有所不同的任何建议都会非常感激

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

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

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

Answer 4

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

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

然后在子视图中js include

$(document).bind("PartialLoaded", function(){ .........});

Answer 5

我相信你可以做这样的事情（源自ASP.NET）：

<script type=”text/javascript”>
     <!--
     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函数。

部分页面加载时未触发jQuery ready事件

5 个答案: