在 UpdatePanel 中更新后重新加载 jquery 事件问题答案

【问题标题】：Reloading jquery events issue after updation in UpdatePanel在 UpdatePanel 中更新后重新加载 jquery 事件问题
【发布时间】：2010-07-10 08:32:16
【问题描述】：

我在 UpdatePanel 中更新后遇到问题。问题是在 UpdatePanel 中更新后 jquery 事件不工作/触发。第一次，jquery 事件有效，但在 UpdatePanel 中更新后无效。如果我删除 UpdatePanel，问题就解决了。但我必须使用 UpdatePanel。

你能给我一个解决方案吗？

【问题讨论】：

标签： c# asp.net jquery-ui jquery

【解决方案1】：

其中一个可能的原因是UpdatePanel 替换了 DOM 中附加了 jquery 事件的元素，这当然会使这些事件无效。一种可能的解决方案是使用.live() 函数来注册事件，但它仅适用于某些事件。

如果您不能使用 live 函数，则需要在 UpdatePanel 有 finished 替换 DOM 元素后重新附加这些事件：

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, args) {
    // TODO: reattach your jquery event handlers
});

【讨论】：

为了使用.live()，我们可以在普通jquery下使用吗？还是我们必须下载任何插件/javascript 文件？
.live() 函数是 jquery 的一部分（请参阅我帖子中的链接），因此您可以直接使用它。
好的...让我试试...我们应该在每次 UpdatePanle 执行时还是在页面加载时使用 .live() ？
你能给我注册一个方法的livequery插件的示例代码吗？页面加载也是如此。例如，我有两个方法“可拖动”和“可放置”。这是我写的：$(document).ready(function() { if (jQuery.livequery) jQuery.livequery.registerPlugin("draggable", "droppable "); InitializePage(); }); function InitializePage() { $(".draggable").live("draggable",{ helper: 'clone', scroll: false }); BindDropEvent(); }
函数 BindDropEvent() { $(".droppable").live("droppable",{ drop: function(ev, ui) { } }); }

【解决方案2】：

即使在页面回发之后，您也需要绑定要执行的事件或函数，因为元素不记得回发后附加到它们的事件..

所以你需要在 endRequst 处理程序中调用它们

$(function{

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(AfterPostBack);

    AfterPostBack();

});

function AfterPostback(){

   // Your code goes here...
}

【讨论】：