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