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新的“实时”方法绑定您的事件。 它将把事件与所有现在的元素和所有未来的元素绑定起来。 茶青！ 🙂
