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

我在页面上有几个input和选项元素,每个(几乎)都有一个事件附加在页面更新后更新一些文本。 我使用的jQuery真的很酷:)

我也使用微软Ajax框架,利用UpdatePanel。 我这样做的原因是某些元素是基于某些服务器端逻辑在页面上创build的。 我真的不想解释为什么我使用UpdatePanel – 即使它可以(它可以很费力)被重写为只使用jQuery,我仍然想要UpdatePanel。

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

无论如何,我留下了UpdatePanel完成更新DOM后重新绑定我的控件的问题。 我最好需要一个解决scheme,不需要在页面中添加更多的.js文件(jQuery插件),而是能够捕获UpdatePanel的'afterupdating',在那里我可以调用我的方法重新绑定所有表单元素。

由于您使用的是ASP.NET AJAX,因此您将可以访问pageLoad事件处理程序,每次页面回传时都会调用该事件处理程序,从UpdatePanel将其全部或部分回传。 你只需要把这个function放到你的页面上,不需要连接。

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

或者你可以通过on()方法来检查最新的jQuery的实时function。

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

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

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

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

…因为“input”已被重写。 做这个,而不是:

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

只要文档在附近,任何input(包括来自UpdatePanel刷新的input)都将触发更改处理程序。

使用下面的代码

 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; } } } 

你可以使用jQuery和事件委托。 基本上把事件挂接到容器,而不是每个元素,然后查询event.target并根据它来运行脚本。

它有多个好处,可以减less代码噪音(无需重新绑定)。 浏览器内存也更容易(在DOM中绑定更less的事件)。

快速示例这里 。

jQuery插件 ,方便事件委托。

PS我是99%肯定代表团将在下一个版本的jQuery核心。

  <script type="text/javascript"> function pageLoad() { if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) { } </script> </ContentTemplate> </asp:UpdatePanel> 

到“如果”你可以把你需要执行的代码,每次updatepanel做AsyncPostBack。

使用下面的代码,你需要validation控件将使用datapicker:

  <script type="text/javascript" language="javascript"> Sys.WebForms.PageRequestManager.getInstance().add_endRequest(addDataPicker); function addDataPicker(sender, args) { var fchFacturacion = document.getElementById('<%= txtFechaFacturacion.ClientID %>'); if (fchFacturacion != null) { $(fchFacturacion).datepicker({ onSelect: function () { }, changeMonth: true, changeYear: true, showOn: 'button', buttonImage: '../Imagenes/calendar.gif', buttonImageOnly: true});} } </script> <asp:UpdatePanel ID="upEjem" runat="server" UpdateMode="Conditional"> <ContentTemplate> <div id="div1" runat="server" visible="false"> <input type="text" id="txtFechaFacturacion" name="txtFechaFacturacion" visible="true" readonly="readonly" runat="server" /> </div> </ContentTemplate> </asp:UpdatePanel> 

使用jQuery新的“实时”方法绑定您的事件。 它将把事件与所有现在的元素和所有未来的元素绑定起来。 茶青! 🙂