我正在使用jQuery在UpdatePanel内的元素上连接一些鼠标悬停效果。事件绑定在$(document)中。准备好了。例如:
$(function() {
$('div._Foo').bind("mouseover", function(e) {
// Do something exciting
});
});
当然，这在页面第一次加载时工作得很好，但是当UpdatePanel进行部分页面更新时，它不会运行，鼠标悬停效果在UpdatePanel内部也不再工作。
在第一个页面加载时，以及每次UpdatePanel触发部分页面更新时，建议使用什么方法来连接jQuery中的内容?我应该使用ASP。NET ajax生命周期代替$(document).ready?
当前回答
更新面板总是在每次加载后用其内置的Scriptmanager的脚本替换Jquery。如果你像这样使用pageRequestManager的实例方法会更好…
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest)
function onEndRequest(sender, args) {
// your jquery code here
});
它会工作得很好……
其他回答
你也可以试试:
<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事件。
函数pageLoad()在这种情况下使用非常危险。您可以将事件连接多次。我也会远离.live()，因为它附加到文档元素，并且必须遍历整个页面(又慢又糟糕)。
迄今为止我见过的最佳解决方案是在更新面板之外的包装器上使用jQuery .delegate()函数并使用冒泡。除此之外，您还可以使用Microsoft的Ajax库来连接处理程序，该库旨在与UpdatePanels一起工作。
对于布莱恩·麦凯的回答:
我通过ScriptManager将JavaScript注入到我的页面中，而不是直接将它放入UserControl的HTML中。在我的例子中，我需要滚动到UpdatePanel完成并返回后可见的表单。这在文件后面的代码中。在我的示例中，我已经在主内容页上创建了prm变量。
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;
}
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>
所以…我只是想让某人知道这个方法有用。
更新面板总是在每次加载后用其内置的Scriptmanager的脚本替换Jquery。如果你像这样使用pageRequestManager的实例方法会更好…
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest)
function onEndRequest(sender, args) {
// your jquery code here
});
它会工作得很好……
