jquery - jQuery $(document).ready和UpdatePanels?

  显示原文与译文双语对照的内容

我使用jQuery来连接对一个UpdatePanel内的元素的一些鼠标悬停效果。 事件在 $(document).ready 中绑定。 例如:


$(function() { 
 $('div._Foo').bind("mouseover", function(e) {
//Do something exciting
 }); 
});

当然,第一次加载页面时效果很好,但是当UpdatePanel做了部分页面更新时,它不会运行,而且鼠标的效果不会在UpdatePanel中更多的工作。

推荐的方法是使用jQuery来连接内容,不仅在第一页加载,而且每次UpdatePanel触发部分页面更新时? 我应该使用 ASP.NET ajax生命周期而不是 $(document).ready

时间:

UpdatePanel完全替换更新中更新面板的内容。 这意味着你订阅的那些事件不再订阅,因为更新面板中有新元素。

我所做的工作是在每次更新后对我需要的事件进行 re-subscribe 。 我使用 $(document).ready() 进行初始加载,然后使用微软( 如果页面上有更新面板,则可用)的PageRequestManager来更新每个更新。


$(document).ready(function() {
//bind your jQuery events here initially
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
//re-bind your jQuery events here
});

PageRequestManager 是一个javascript对象,如果更新面板位于页面上,它将自动可用。 你不需要执行上代码,只要UpdatePanel位于页面上就可以使用它。

如果需要更详细地控制,这里事件将传递参数类似于 (sender, eventArgs). NET 事件是如何传递参数的,所以你可以看到在引发事件的,只在需要时 re-bind 。

以下是来自微软的文档的最新版本: msdn.microsoft.com/.../bb383810.aspx


你可能有一个更好的选项,具体取决于你的需要,是使用jquery的.on() 。 这些方法比re-subscribing对每个更新的DOM元素更高效。 在使用这里方法之前,请先阅读所有文档,因为它可能会满足你的需求,也可能不会满足你的需求。 有很多jQuery插件是不合理的,以至于重构使用 .delegate() 或者 .on(),所以在这些情况下,你最好是 re-subscribing 。


<script type="text/javascript">

 function BindEvents() {
 $(document).ready(function() {
 $(".tr-base").mouseover(function() {
 $(this).toggleClass("trHover");
 }).mouseout(function() {
 $(this).removeClass("trHover");
 });
 }
</script>

将要更新的区域。


<asp:UpdatePanel...
<ContentTemplate
 <script type="text/javascript">
 Sys.Application.add_load(BindEvents);
 </script>
 *//Staff*
</ContentTemplate>
 </asp:UpdatePanel>

里面用jQuery一个 UpdatePanel, 用户控件

这不是一个直接的答案中,但我确实把这个解决方案在一起通过阅读回答的我在这里发现,我还以为有人可能会发现它有用。

我试图在用户控件中使用一个jQuery文本限制器。 在一个UpdatePanel的callback,这有些棘手,因为用户控件的内部运行,而失去了它原有 bindings.

如果这只是一个页面,这里的答案将会直接应用。 但是,用户控件没有直接接触到开头标记,更没有能够直接接触到UpdatePanel作为寻找答案中的一些假设。

我最终把这个脚本块放到了我的用户标记的顶部。 对于初始绑定,它使用 $(document).ready,然后使用来自那里的prm.add_endRequest:


<script type="text/javascript">
 function BindControlEvents() {
//jQuery is wrapped in BindEvents function so it can be re-bound after each callback.
//Your code would replace the following line:
 $('#<%= TextProtocolDrugInstructions.ClientID %>').limit('100', '#charsLeft_Instructions'); 
 }

//Initial bind
 $(document).ready(function () {
 BindControlEvents();
 });

//Re-bind for callbacks
 var prm = Sys.WebForms.PageRequestManager.getInstance(); 

 prm.add_endRequest(function() { 
 BindControlEvents();
 }); 

</script>

所以- 只是觉得有人可能希望了解的证明是正确

升级到 jQuery 1.3并使用:


$(function() {

 $('div._Foo').live("mouseover", function(e) {
//Do something exciting
 });

});

注意:现场工作与大多数事件,但不是全部。 在中有一个完整的列表文档。

你也可以尝试:


<asp:UpdatePanel runat="server" ID="myUpdatePanel">
 <ContentTemplate>

 <script type="text/javascript" language="javascript">
 function pageLoad() {
 $('div._Foo').bind("mouseover", function(e) {
//Do something exciting
 });
 }
 </script>

 </ContentTemplate>
</asp:UpdatePanel>

,因为 pageLoad() 是一个 ASP.NET ajax事件,每次在客户端加载页面时都会执行它。

我这里可以工作:


$(document).ready(function() {

//Do something exciting

 var prm = Sys.WebForms.PageRequestManager.getInstance();

 prm.add_endRequest(function() {
//re-bind your jQuery events here
 });

});

...