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

发布于 2024-08-13 21:03:30 字数 412 浏览 12 评论 0原文

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

逐鹿 2024-08-20 21:03:30

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

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

load() 文档

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

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

ajaxComplete() 文档

How are you firing the AJAX request to the server? If you're using ASP.NET AJAX, then Brian Hasden's answer is what you are looking for. If you are using jQuery to send the request, then you can either set a call back using the load function.

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

load() Documentation

or set a global ajaxComplete event that is fired every time an ajax call is complete.

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

ajaxComplete() Documentation

回复收藏 0 原文

江南月 2024-08-20 21:03:30

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

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

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

The load method offers a callback which is executed after the content has been loaded.

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

Full documentation and examples at jQuery.com: http://docs.jquery.com/Ajax/load

回复收藏 0 原文

深海里的那抹蓝 2024-08-20 21:03:30

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

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

然后在子视图js中include

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

OK.. so i have a simple answer to this problem now, which should mean minimal code changes. Rather than the sub views (these are real aspx views which have no html, head or body tags) having a js include (essentially the client side behaviour model) which responds to $(document).ready, we can use the suggestion from mkedobbs to provide something similar. Simply:

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

Then in the sub view js include

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

回复收藏 0 原文

对你再特殊 2024-08-20 21:03:30

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

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

现在真正让我困惑的是，它似乎在某些情况下有效，但在其他情况下不起作用；例如 1) 当父视图在 IE 中的框架中打开时，子视图就绪永远不会触发 2) 当直接在 IE 中打开相同的 url 时，子视图就绪会被触发 3) 当在 FFX2 中打开相同的 URL 时准备好每个都没有被触发4）最后..但是当在FFX2中打开这个父级的子视图（有子视图）时，子级就绪事件被触发！..令人困惑..

我要运行一些测试n得到回到你身边，但是任何关于为什么这种行为可能不同的建议都会非常感激

更新：啊哈！..看起来即使清除了上述障碍，浏览器也存在差异（显然从上面的阅读中）..下面的简单测试在 IE7 中工作正常，但在 FFX2 中失败。将Test2.htm加载到Test1.htm时，在IE中会触发ready事件，但在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>

Well - I'm using ASP.NET MVC with jQuery. I am NOT using partial view (ascx) for this part of the application, instead I am sing full views, but loading them in to divs. So I have a main view with a head with some reference to a js file which is the client side logic for this "type" of view. When clicking some tab on this view we use the jquery tabs to "load" antoher view into some div. The way tabs are loaded using this plugin is by simply giving a url (rather than using load to which - as pointed out - i could add a call back function rather than rely on ready).

However. I dont want ALL the client logic to be in some parent view, as any view should be able to load another view by url (sub views include a link to their related js file which contains all the logic to format/hookup when loaded).

What is REALLY confusing to me now is that it seems to be working in some situations and not in others; for example 1) when the parent view is opened in a frame in IE, the sub view readys are never triggered 2) when opening the same url directly in IE, the sub views readys ARE triggered 3) when opening the same URL in FFX2 the ready every are NOT triggered 4) finally.. but when opening a sub view (which has sub views) of this parent in FFX2, the child ready event ARE triggered!.. baffling..

I'mm gonna run some tests n get get back to ya, but any suggestions on why this behaviour might be different would be much appreciated

UPDATE: Ah ha!.. looks like even with the above hurdles cleared, there is a browser difference (obviously from reading above).. the below simple test works fine in IE7 but fails in FFX2. The ready event is triggered in IE but not FFX when loading Test2.htm into Test1.htm. From experience I know this means that IE has a "quirk" and FFX is working as you would expect based on W3C. So it looks like this approach is a no no, unless anyone has any suggestions?:

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>

回复收藏 0 原文

浪推晚风 2024-08-20 21:03:30

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

I believe you can do something like this (derived from 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>

Which should hook into the end request event that includes partial page updates. You'd obviously update the example above to call the appropriate JS function that you'd like.

回复收藏 0 原文

~没有更多了~