我正在使用jQuery在UpdatePanel中的元素上附加一些鼠标悬停效果。事件绑定在中$(document).ready。例如:
$(document).ready
$(function() { $('div._Foo').bind("mouseover", function(e) { // Do something exciting }); });
当然,这在第一次加载页面时效果很好,但是当UpdatePanel执行部分页面更新时,它不会运行,并且鼠标悬停效果在UpdatePanel内部不再起作用。
不仅在首页加载时,而且在每次UpdatePanel触发部分页面更新时,建议在jQuery中进行接线的推荐方法是什么?我应该使用ASP.NET ajax生命周期来代替$(document).ready吗?
UpdatePanel完全替换更新中更新面板的内容。这意味着您订阅的那些事件不再被订阅,因为该更新面板中有新的元素。
解决此问题的方法是,在每次更新后重新订阅我需要的事件。我使用$(document).ready()初始负载,然后使用Microsoft的负载PageRequestManager(如果页面上有更新面板,则可用)重新订阅每个更新。
$(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,就不需要使用上面的代码做任何事情即可使用它。
如果需要更详细的控制,则此事件传递的参数类似于.NET事件传递参数的方式,(sender, eventArgs)因此您可以查看引发该事件的原因,并仅在需要时重新绑定。
(sender, eventArgs)
这是来自Microsoft的文档的最新版本:msdn.microsoft.com/…/bb383810.aspx
根据您的需求,您可能有一个更好的选择是使用jQuery .on()。这些方法比每次更新都重新订阅DOM元素更为有效。但是,在使用此方法之前,请先阅读所有文档,因为它可能会满足您的需求,也可能无法满足您的需求。有很多jQuery插件无法重构为使用.delegate()或.on(),因此在这种情况下,最好重新订阅。
.on()
.delegate()