ASP.NET 更新面板阻止 jquery 工作答案

【问题标题】：ASP.NET Update Panel stops jquery from workingASP.NET 更新面板阻止 jquery 工作
【发布时间】：2010-11-15 11:39:18
【问题描述】：

我已经为 mouseenter mouseleave 以及 jquery draggable 设置了绑定的 jquery 事件。 div 放置在更新面板中，当单击按钮时，信息将发送到数据库并更新更新面板。但是，当面板更新时，jquery 事件不再起作用。知道为什么会这样吗？

【问题讨论】：

标签： .net asp.net jquery updatepanel

【解决方案1】：

布莱恩得到了答案。我通常会附加一些事件处理程序，用于皮肤等，在 PostBacks 之后触发：

    /**
    *   .NET Event Handlers
    *   When new code is added on to the client by way of
    *   .NET PostBacks, CSS is typically ignored.  This method
    *   can be used to add CSS to new elements as they are added
    *   asynchronously.  It calls a script at the end of every 
    *   partial post back request.
    *
    *   @example - Core.NETEventHandlers.AsyncPostBack.Init();
    */    
    var NETEventHandlers: {
        /**
        *   Async Post Back Handler
        *   calls a script at the end of every partial post back request
        */          
        AsyncPostBack: {
            EndRequest: {
                Add: function() {
                    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(NETEventHandlers.AsyncPostBack.EndRequest.Handler);
                } // EO Add
                , Handler: function(sender, args) {
                    // Handlers here.
                    alert('Hello World');
                } // EO Handler
            } // EO endRequest
            , Init: function() {
                Sys.Application.add_init(NETEventHandlers.AsyncPostBack.EndRequest.Add);
            }
        } // EO AsyncPostBack
    } // EO dotNETEventHandlers

【讨论】：

【解决方案2】：

查看来自 Encosia 的 blog post，它为您提供了几种在异步更新后重新绑定的方法。我发现这解决了我的类似问题。

【讨论】：

【解决方案3】：

尝试使用

function pageLoad(sender, args)
{ 
   // JQuery code goes here
}

而不是

   $(document).ready(function() {
      // JQuery code goes here
   });

当点击更新面板中的按钮时，这将起作用；它转到服务器并在返回时重新添加 jquery。但是，这不适用于由 eo:AJAXUploader 等控件引起的异步回发，但将其与 Bryans 版本结合使用，您也可以处理异步回发

【讨论】：

【解决方案4】：

您可以在页面中添加异步触发器，以便在任何异步调用之后调用 JavaScript/jQuery 函数。

将此代码放在您的 aspx 代码的 Page_Load() 中：

//This script handles ajax postbacks, by registering the js to run at the end of *AJAX* requests
Page.ClientScript.RegisterStartupScript(typeof(Page), "ajaxTrigger", "Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);", true);
Page.ClientScript.RegisterClientScriptBlock(typeof(Page), "EndRequest", "function EndRequestHandler(sender, args){AsyncDone();}", true);

这段代码sn-p会专门调用JavaScript/jQuery函数AsyncDone();

【讨论】：

您是否尝试发出警报以查看它是否被调用？在 AsyncDone() 函数内的每个异步页面加载后，您必须重新连接您的 jquery 事件。

【解决方案5】：

使用live。

$("div").live("mouseenter", function(){
      // do something
    });

【讨论】：

来自 jquery docs for "live"：目前不支持：blur、focus、mouseenter、mouseleave、change、submit
对于新发现这个问题的人来说，情况不再如此，jQuery 1.4 和更新版本支持所有冒泡的事件。 api.jquery.com/live