Ajax更新后重新绑定jQuery中的事件(updatepanel)

我的页面上有几个输入和选项元素,每个(几乎都有)附加了一个事件,一旦它们发生变化就会更新页面上的一些文本.我用jQuery真的很酷:)

我还使用了微软的Ajax框架,利用了UpdatePanel.我之所以这样做,是因为某些元素是基于某些服务器端逻辑在页面上创建的.我真的不想解释为什么我使用UpdatePanel - 即使它可以(它可以付出相当大的努力)被重写为仅使用jQuery我仍然想要UpdatePanel.

您可能已经猜到了 - 一旦我在UpdatePanel上回发,jQuery事件就会停止工作.我实际上是在期待这个,因为"回发"并不是真正的新回发所以我在document.ready中绑定事件的代码将不再被触发.我还通过在jQuery帮助库中阅读它来证实了我的怀疑.

无论如何,在UpdatePanel完成更新DOM之后,我仍然遇到重新绑定控件的问题.我最好需要一个不需要向页面添加更多.js文件(jQuery插件)的解决方案,但是能够捕获UpdatePanel的'afterupdating'这样简单,我可以调用我的方法重新绑定所有表单元素.

1> Phil Jenkins..：

---

由于您使用的是ASP.NET AJAX,因此您可以访问pageLoad事件处理程序,每次页面回发时都会调用该事件处理程序,无论是全局还是部分来自UpdatePanel.您只需将该功能放入您的页面,不需要连接.

function pageLoad(sender, args)
{
   if (args.get_isPartialLoad())
   {
       //Specific code for partial postbacks can go in here.
   }
}

---

注意:页面上只执行一个"pageLoad"函数 - 最后一个定义.因此,如果需要执行的操作驻留在不同的控件上 - 有更简单的方法来实现所需的行为 - 例如"Sys.Application.add_load".

2> 小智..：

---

或者您可以通过该on()方法检查最新的jQuery的实时功能.

3> Paulius..：

---

Sys.Application.add_load(initSomething);
function initSomething()
{
  // will execute on load plus on every UpdatePanel postback
}

4> lambinator..：

---

从jQuery 1.7开始,推荐的方法是使用jQuery的.on()语法.

但是,请确保在文档对象上设置事件,而不是在DOM对象本身上设置事件.例如,这将在UpdatePanel回发后中断:

$(':input').on('change', function() {...});

...因为':输入'已被重写.改为:

$(document).on('change', ':input', function() {...});

只要文档存在,任何输入(包括UpdatePanel刷新的输入)都将触发更改处理程序.

5> shatl..：

---

使用以下代码

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    // check if Main Panel was updated 
    for (idx = 0; idx < updatedPanels.length; idx++) {
        if (updatedPanels[idx].id == "<%=upMain.ID %>") {
            rebindEventsForMainPanel();
            break;
        }
    }
}

6> redsquare..：

---

您可以使用jQuery和事件委派.基本上将事件挂钩到容器而不是每个元素,并查询event.target并基于此运行脚本.

它有多种好处,因为您可以减少代码噪音(无需重新绑定).它在浏览器内存上也更容易(在DOM中绑定的事件更少).

这里的简单例子.

用于轻松事件委派的jQuery插件.

PS我99%肯定代理将在下一个版本的jQuery核心.

7> 小智..：

---

使用以下代码,您需要验证控件将使用datapicker: