我正在使用jQuery在UpdatePanel内的元素上连接一些鼠标悬停效果。事件绑定在$(document)中。准备好了。例如:
$(function() {
$('div._Foo').bind("mouseover", function(e) {
// Do something exciting
});
});
当然，这在页面第一次加载时工作得很好，但是当UpdatePanel进行部分页面更新时，它不会运行，鼠标悬停效果在UpdatePanel内部也不再工作。
在第一个页面加载时，以及每次UpdatePanel触发部分页面更新时，建议使用什么方法来连接jQuery中的内容?我应该使用ASP。NET ajax生命周期代替$(document).ready?
当前回答
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
});
}
其他回答
我会使用以下方法之一:
将事件绑定封装在函数中，并在每次更新页面时运行它。您总是可以包含到特定元素的事件绑定，这样就不会将事件多次绑定到相同的元素。 使用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()是不合理的，所以在这些情况下，你最好重新订阅。
我的回答是基于上面所有专家的评论，但下面是以下代码，任何人都可以使用它来确保在每次回发和每次异步回发时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>
升级到jQuery 1.3并使用:
$(function() {
$('div._Foo').live("mouseover", function(e) {
// Do something exciting
});
});
注:现场工作与大多数事件，但不是所有。在文档中有一个完整的列表。
函数pageLoad()在这种情况下使用非常危险。您可以将事件连接多次。我也会远离.live()，因为它附加到文档元素，并且必须遍历整个页面(又慢又糟糕)。
迄今为止我见过的最佳解决方案是在更新面板之外的包装器上使用jQuery .delegate()函数并使用冒泡。除此之外，您还可以使用Microsoft的Ajax库来连接处理程序，该库旨在与UpdatePanels一起工作。
