jQuery美元(文档)。ready和UpdatePanels?

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

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

当然，这在页面第一次加载时工作得很好，但是当UpdatePanel进行部分页面更新时，它不会运行，鼠标悬停效果在UpdatePanel内部也不再工作。

在第一个页面加载时，以及每次UpdatePanel触发部分页面更新时，建议使用什么方法来连接jQuery中的内容?我应该使用ASP。NET ajax生命周期代替$(document).ready?

230306 次浏览
小开

我会使用以下方法之一:

  1. 将事件绑定封装在函数中，并在每次更新页面时运行它。您总是可以包含到特定元素的事件绑定，这样就不会将事件多次绑定到相同的元素。

  2. 使用livequery插件，它基本上自动地为您执行方法一。根据希望对事件绑定的控制程度，您的偏好可能有所不同。

小开
最佳答案

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

为了解决这个问题，我所做的是在每次更新后重新订阅我需要的事件。我使用$(document).ready()进行初始加载，然后使用Microsoft的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在页面上，除了上面的代码，您不需要做其他任何事情就可以使用它。

如果你需要更详细的控制，这个事件传递的参数类似于。net事件传递参数(sender, eventArgs)，这样你就可以看到是什么引发了事件，只在需要时重新绑定。

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

根据你的需要，一个更好的选择是使用jQuery的.on()。这些方法比每次更新时重新订阅DOM元素更有效。但是，在使用这种方法之前请阅读所有文档，因为它可能满足也可能不满足您的需求。有很多jQuery插件不合理的重构使用.delegate()或.on()，所以在这些情况下，你最好重新订阅。

小开

我也遇到过类似的问题，发现最好的方法是依靠事件冒泡和事件委托来处理它。事件委托的好处是，一旦设置好，就不必在AJAX更新后重新绑定事件。

我在代码中所做的是在更新面板的父元素上设置一个委托。更新时不会替换此父元素，因此事件绑定不受影响。

有很多很好的文章和插件可以用jQuery处理事件委托，这个特性很可能会加入到1.3版本中。我用来参考的文章/插件是:

http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery

一旦您理解了发生了什么，我认为您会发现这是一个更优雅的解决方案，比每次更新后都记得重新绑定事件更可靠。这还有一个额外的好处，即在卸载页面时为您提供一个可以解绑定的事件。

小开

FWIW，我在使用mootools时也遇到了类似的问题。重新附加我的事件是正确的举动，但需要在请求结束时完成

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {...

如果beginRequest导致你得到空引用JS异常，请记住这一点。

干杯

小开 
<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 1.3并使用:

$(function() {


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


});

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

小开

jQuery在UpdatePanel中的用户控件

这不是对问题的直接回答，但我确实通过阅读我在这里找到的答案把这个解决方案组合在一起，我想有人可能会觉得它有用。

我试图在用户控件中使用jQuery文本区域限制器。这很棘手，因为用户控件运行在UpdatePanel内部，并且在回调时丢失了绑定。

如果这只是一个页面，这里的答案将直接适用。但是，用户控件不能直接访问head标签，也不能像一些答案假设的那样直接访问UpdatePanel。

我最终把这个脚本块放在我的用户控件的标记的顶部。对于初始绑定，它使用$(document)。准备好了，然后使用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>

所以…我只是想让某人知道这个方法有用。

小开

你也可以试试:

<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事件。

小开

我的答案吗?

function pageLoad() {


$(document).ready(function(){

等。

在许多其他解决方案都惨败的情况下，它就像一个魅力。

小开

函数pageLoad()在这种情况下使用非常危险。您可以将事件连接多次。我也会远离.live()，因为它附加到文档元素，并且必须遍历整个页面(又慢又糟糕)。

迄今为止我见过的最佳解决方案是在更新面板之外的包装器上使用jQuery .delegate()函数并使用冒泡。除此之外，您还可以使用Microsoft的Ajax库来连接处理程序，该库旨在与UpdatePanels一起工作。

小开

我的回答是基于上面所有专家的评论，但下面是以下代码，任何人都可以使用它来确保在每次回发和每次异步回发时JavaScript代码仍然会被执行。

在我的例子中，我在页面中有一个用户控件。只需将下面的代码粘贴到用户控件中。

<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
if (args.get_error() == undefined) {
UPDATEPANELFUNCTION();
}
}


function UPDATEPANELFUNCTION() {
jQuery(document).ready(function ($) {
/* Insert all your jQuery events and function calls */
});
}


UPDATEPANELFUNCTION();


</script>
小开

对于布莱恩·麦凯的回答:

我通过ScriptManager将JavaScript注入到我的页面中，而不是直接将它放入UserControl的HTML中。在我的例子中，我需要滚动到UpdatePanel完成并返回后可见的表单。这在文件后面的代码中。在我的示例中，我已经在主内容页上创建了人口、难民和移民事务局变量。

private void ShowForm(bool pShowForm) {
//other code here...
if (pShowForm) {
FocusOnControl(GetFocusOnFormScript(yourControl.ClientID), yourControl.ClientID);
}
}


private void FocusOnControl(string pScript, string pControlId) {
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "focusControl_" + pControlId, pScript, true);
}


/// <summary>
/// Scrolls to the form that is made visible
/// </summary>
/// <param name="pControlId">The ClientID of the control to focus on after the form is made visible</param>
/// <returns></returns>
private string GetFocusOnFormScript(string pControlId) {
string script = @"
function FocusOnForm() {
var scrollToForm = $('#" + pControlId + @"').offset().top;
$('html, body').animate({
scrollTop: scrollToForm},
'slow'
);
/* This removes the event from the PageRequestManager immediately after the desired functionality is completed so that multiple events are not added */
prm.remove_endRequest(ScrollFocusToFormCaller);
}
prm.add_endRequest(ScrollFocusToFormCaller);
function ScrollFocusToFormCaller(sender, args) {
if (args.get_error() == undefined) {
FocusOnForm();
}
}";
return script;
}
小开

更新面板总是在每次加载后用其内置的Scriptmanager的脚本替换Jquery。如果你像这样使用pageRequestManager的实例方法会更好…

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest)
function onEndRequest(sender, args) {
// your jquery code here
});

它会工作得很好……

小开 
pageLoad = function () {
$('#div').unbind();
//jquery here
}

pageLoad函数非常适合这种情况，因为它在初始页面加载和每次updatepanel异步回发时运行。我只需要添加unbind方法，使jquery工作在updatepanel回发。

http://encosia.com/document-ready-and-pageload-are-not-the-same/

小开

当$(document).ready(function (){...})不工作后页面发布回来，然后使用JavaScript函数pageLoad在Asp。页面如下:

<script type="text/javascript" language="javascript">
function pageLoad() {
// Initialization code here, meant to run once.
}
</script>
小开 
Sys.Application.add_load(LoadHandler); //This load handler solved update panel did not bind control after partial postback
function LoadHandler() {
$(document).ready(function () {
//rebind any events here for controls under update panel
});
}
小开

使用下面的脚本并相应地更改脚本正文。

       <script>
//Re-Create for on page postbacks
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
//your codes here!
});
</script>
小开

对于在我的情况下的其他人，我试图让jquery文档准备函数为DevExpress ASPxCallbackPanel工作，上面没有(到目前为止)工作。这是对我有效的方法。

<script>
function myDocReadyFunction(){ /* do stuff */  }
</script>


<dx:ASPxCallbackPanel ID="myCallbackPanel" ... >
<ClientSideEvents EndCallback="function(){ myDocReadyFunction();}">
</ClientSideEvents>
<PanelCollection ...>
</dx:ASPxCallbackPanel>

提交答案