ASP.NET Update Panel阻止jquery工作

Question

我已经为mouseenter和mouseleave绑定了jquery事件，还有jquery draggable。这些div放置在一个更新面板中，当点击按钮向数据库发送信息并更新更新面板时，然而当面板更新时，jquery事件不再起作用。你有任何想法为什么会出现这种情况吗？

- ErnieStings

Answer 1

您可以在页面中添加异步触发器，以在任何异步调用后调用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);

这段代码将专门调用JavaScript/jQuery函数AsyncDone();

- Bryan Denny

---

你尝试过放置一个警告来查看它是否被调用了吗？在AsyncDone()函数内的每个异步页面加载后，您将不得不重新连接您的jquery事件。 - Bryan Denny

Answer 2

尝试使用

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

代替

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

当更新面板中的按钮被点击时，它会发送到服务器并在返回时重新添加jQuery，这样可以正常工作。但是，由eo:AJAXUploader等控件引起的异步后台操作则无法使用此方法。 不过，结合Bryan的版本，您可以处理异步后台操作。

- Josh Mein

Answer 3

看一下 Encosia 的这篇 博客文章，它给出了一些异步更新后重新绑定的方法。我发现这解决了我的类似问题。

- Ian Roke

Answer 4

使用 live。

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

- Daniel Moura

---

目前不支持：blur、focus、mouseenter、mouseleave、change、submit - John Boker

对于初次发现此问题的人，情况已经改变了，jQuery 1.4及更高版本支持所有冒泡事件。https://api.jquery.com/live/ - alexia

Answer 5

Bryan有答案。我通常会附加一些事件处理程序，用于皮肤等方面，在PostBack后触发，代码如下：

    /**
    *   .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

- andes