Ajax 更新后在 jQuery 中重新绑定事件 (updatepanel)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/301473/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rebinding events in jQuery after Ajax update (updatepanel)
提问by Per Hornsh?j-Schierbeck
I have several input and option elements on my page, each (well almost) have an event attached to update some text on the page once they change. I use jQuery which is really really cool :)
我的页面上有几个输入和选项元素，每个（几乎）都有一个附加的事件，一旦它们发生变化，就会更新页面上的一些文本。我使用 jQuery，它真的很酷:)
I also use Microsofts Ajaxframework, utilizing the UpdatePanel. The reason why I do that is that certain elements are created on the page based on some server-side logic. I don't really want to explain why I use the UpdatePanel - even if it could (it can with quite some effort) be rewritten to use only jQueryI still want that UpdatePanel.
我还使用 Microsoft 的Ajax框架，利用 UpdatePanel。我这样做的原因是某些元素是基于某些服务器端逻辑在页面上创建的。我真的不想解释为什么我使用 UpdatePanel - 即使它可以（它可以通过相当多的努力）被重写为仅使用jQuery我仍然想要那个 UpdatePanel。
You probably guessed it - once I have a postback on the UpdatePanel the jQuery events stops working. I actually was expecting this, since the "postback" is not really a new postback so my code in document.ready that binds the events won't be fired again. I also confirmed my suspicion by reading up on it in the jQuery help libraries.
您可能已经猜到了 - 一旦我在 UpdatePanel 上进行回发，jQuery 事件就会停止工作。我实际上在期待这一点，因为“回发”并不是真正的新回发，所以我在 document.ready 中绑定事件的代码不会再次被触发。我还通过在 jQuery 帮助库中阅读它来证实我的怀疑。
Anyway I'm left with the problem of rebinding my controls after the UpdatePanel is done updating the DOM. I preferably need a solution that does not require adding more .js files (jQuery plug-ins) to the page but something as simple as being able to catch the UpdatePanel's 'afterupdating' where I can just call my method to rebind all the form elements.
无论如何，在 UpdatePanel 完成更新DOM后，我仍然面临重新绑定控件的问题。我最好需要一个不需要向页面添加更多 .js 文件（jQuery 插件）的解决方案，而是像能够捕获 UpdatePanel 的“更新后”一样简单的解决方案，我可以在其中调用我的方法来重新绑定所有表单元素.
回答by Phil Jenkins
Since you're using ASP.NET AJAX, you'll have access to a pageLoadevent handler, that gets called each time the page posts back, be it full or partial from an UpdatePanel. You just need to put the function in to your page, no hooking up is required.
由于您使用的是 ASP.NET AJAX，您将有权访问pageLoad事件处理程序，每次页面回发时都会调用该处理程序，无论是完整的还是部分来自 UpdatePanel。您只需要将该功能放入您的页面，无需连接。
function pageLoad(sender, args)
{
if (args.get_isPartialLoad())
{
//Specific code for partial postbacks can go in here.
}
}
回答by George
回答by Paulius
Sys.Application.add_load(initSomething);
function initSomething()
{
// will execute on load plus on every UpdatePanel postback
}
回答by lambinator
As of jQuery 1.7, the recommended way to do this is to use jQuery's .on()syntax.
从 jQuery 1.7 开始，推荐的方法是使用jQuery 的 .on()语法。
Make sure, however, that you set up the event on the documentobject, not the DOM object itself. For example, this will break after the UpdatePanel postback:
但是，请确保在文档对象上设置事件，而不是 DOM 对象本身。例如，这将在 UpdatePanel 回发后中断：
$(':input').on('change', function() {...});
... because the ':inputs' have been rewritten. Do this instead:
... 因为 ':inputs' 已被重写。改为这样做：
$(document).on('change', ':input', function() {...});
As long as the document is around, any inputs (including those from UpdatePanel refreshes) will trigger the change handler.
只要文档还在，任何输入（包括来自 UpdatePanel 刷新的输入）都会触发更改处理程序。
回答by shatl
Use following code
使用以下代码
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;
}
}
}
回答by redsquare
You could use jQuery and event delegation. Basically hook events to containers rather than every element and query the event.target and run script based on that.
您可以使用 jQuery 和事件委托。基本上将事件挂钩到容器而不是每个元素并查询 event.target 并基于此运行脚本。
It has multiple benefits in that you reduce the code noise (no need to rebind). It is also easier on browser memory (less events bound in the DOM.)
它有多种好处，因为您可以减少代码噪音（无需重新绑定）。浏览器内存也更容易（DOM 中绑定的事件更少。）
Quick example here.
快速示例在这里。
jQuery pluginfor easy event delegation.
用于轻松事件委托的jQuery 插件。
P.S I am 99% sure delegation will be in the jQuery core at the next release.
PS 我 99% 肯定在下一个版本中委托将在 jQuery 核心中。
回答by rocke_amiga
Use the following code, You need to validate the control will use the 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>
回答by civanm
<script type="text/javascript">
function pageLoad() {
if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {
}
</script>
</ContentTemplate>
</asp:UpdatePanel>
into of the "if" you can put the code that you need execute every time that the updatepanel does AsyncPostBack.
在“if”中，您可以放入每次更新面板执行 AsyncPostBack 时需要执行的代码。
回答by John Strickler
Bind your events using jQuery's new 'live' method. It will bind events to all your present elements and all future ones too. Cha ching! :)
使用 jQuery 的新 'live' 方法绑定您的事件。它将事件绑定到所有当前元素和所有未来元素。查清！:)
