在部分页面加载时未触发jQuery准备好的事件

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

我可以想到非常可怕的方式克服这个问题，就像在被渲染的页面底部有一个脚本块（加载到一个div中），这会完成我准备好被触发时所做的所有事情（因为您可以假设浏览器已经在脚本中渲染了脚本块被击中）。然而这是非常糟糕的做法。有什么建议么？

来源

2009-12-09 Mr AH

-1

我相信你可以做这样的事情（从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函数。

来源

2009-12-09 17:39:19

这是MS阿贾克斯，不是jQuery的，并通过'PageRequestManager'判断我敢肯定它仅适用于ASP.NET WebForms的。 – Aaronaught 2011-09-16 15:46:40

了解，但如果你看AH先生提供的答案，他表示他使用ASP.NET。我提供了一种弥补.NET部分页面加载的差距，解决他想要的任何JS函数（jQuery就绪事件或其他）的方式。 – 2011-09-16 16:28:10

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

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

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

来源

2009-12-09 17:42:09 mkedobbs

你是如何烧制的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

来源

2009-12-09 17:46:02

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

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

现在我真的很困惑的是，它似乎在某些情况下工作，而不是在其他情况下工作;例如1）当在IE中的一个框架中打开父视图时，从属触发器从不被触发2）当在IE中直接打开相同的URL时，子视图被读取器触发3）当在FFX2中打开相同的URL时准备好每一个都不会触发4）最后..但是当在FFX2中打开这个父视图的子视图（它具有子视图）时，子触发器准备好了！..令人困惑的..

我要运行一些测试n回到ya，关于为什么这种行为可能会有所不同的建议，将不胜感激

更新：啊哈！..看起来像甚至与上述障碍清除，有浏览器的差异（显然从上面的阅读）..下面的简单测试工程在IE7罚款，但在FFX2失败。就绪事件在IE中触发，但在将Test2.htm加载到Test1.htm时不会触发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>

来源

2009-12-10 09:49:04

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

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

然后在子画面JS包括

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

来源

2009-12-10 13:29:51

在部分页面加载时未触发jQuery准备好的事件

回答

相关问题