失去jQuery的委托事件处理程序 [英] losing jquery Delegated Event Handler
问题描述
我已经做了一些东西时，一个改变occure在TextBox在GridView ..所以我：
I've to do some stuff when a changed occure in a TextBox in a GridView.. So I've:
$(function () {
$('.mGrid').on('change', 'input[id*="txtValore"]', function () {
alert('CHANGE!!');
(...)
});
});
的情况是：
<asp:UpdatePanel ID="FlussiPagamento" runat="server" UpdateMode="Conditional">
<ContentTemplate>
(...)
<asp:Panel ID="pnlHome" runat="server">
(...)
<asp:GridView ID="gridPrincipale" CssClass="mGrid">
(...)
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtValore" Text='<%# string.Format("{0:N}", Eval("Valore"))%>'
runat="server" />
</ItemTemplate>
</asp:TemplateField>
(...)
</asp:GridView>
(...)
</asp:Panel>
<asp:Panel ID="pnlDettaglio" Visible="false" runat="server">
(...)
<asp:GridView ID="grid" CssClass="mGrid">
(...)
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtValore" Width="90%" Text='<%# string.Format("{0:N}", Eval("Valore"))%>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
(...)
</asp:GridView>
(...)
</asp:Panel>
(...)
</ContentTemplate>
</asp:UpdatePanel>
渲染这样的：
<div id="ctl00_MainContent_UpdatePanelID">
(...)
<div id="ctl00_MainContent_pnlHome">
<table class="mGrid" id="ctl00_MainContent_gridPrincipale">
(...)
<tr>
<td>
<input name="ctl00$MainContent$grdFlusso$ctl02$txtValore" type="text" value="1.920.442,73" id="ctl00_MainContent_gridPrincipale_ctl02_txtValore" />
</td>
</tr>
</table>
</div>
(...)
(This part when Visible=true)
<div id="ctl00_MainContent_pnlDettaglio">
(...)
<table class="mGrid" id="ctl00_MainContent_grid">
<tbody>
(...)
<tr>
(...)
<td>
<input name="ctl00$MainContent$grid$ctl03$txtValore" value="1.693,44" id="ctl00_MainContent_grid_ctl03_txtValore" onchange="test(this.id)" type="text">
</td>
<td>
<input name="ctl00$MainContent$grid$ctl03$txtRicalcolato" value="169,34" id="ctl00_MainContent_grid_ctl03_txtRicalcolato" onchange="test(this.id)" type="text">
</td>
(...)
<td>
<span id="ctl00_MainContent_grid_ctl03_lblDelta">-1.524,10</span>
</td>
(...)
</tr>
(...)
</tbody>
</table>
(...)
</div>
(...)
</div>
在第一GridView的我也已经，做第二griview数据绑定和开关面板visibility..In第二小组我有另一种的ImageButton的ImageButton的，GridView控件外，这并不相反。我想无论它做了回发，因为我可以看到整个页面重新加载..现在的行为，当第一次加载页面时，如果我改变第一个网格文本框的文字，我可以看到的警报。我点击的ImageButton并切换到第二盘之后，当第二格变化的文字，如果我回来第一个面板，它再也不会甚至没有与第一个工作是不是触发事件..可能是什么问题？
In the first GridView I've also an ImageButton that does second griview databound and switch the panels visibility..In the second Panel I've another ImageButton, outside the GridView, that does the opposite.. I think both of it does a postback, because I can see the entire page is reloaded.. Now the behaviour is, when the first time the page is loaded if I change the first grid TextBox text I can see the alert. After I click the ImageButton and switch to second panel, the event is not fired when change text on second grid and if I come back to first panel, it don't work anymore not even with the first one.. What could be the problem?
推荐答案
如果你的按钮即开关面板取代了当前电网，你需要委派它回的高的不变化的祖先
If your button "that switches panels" replaces the current grid, you need to delegate it back to a higher non-changing ancestor:
例如。 文件
$(function () {
$(document).on('change', '.mGrid input[id*="txtValore"]', function () {
alert('CHANGE!!');
(...)
});
});
这现在读作......如有更改事件冒泡到文件，运行。MGRID输入[ID * =txtValore ] 选择地发现，导致它的元素的然后的火力打击该元素的功能。
This now reads as... if any change event bubbles up to document, run the '.mGrid input[id*="txtValore"]' selector to find the element that caused it, then fire the function against that element.
注意： 文件只是你的后备默认如果没有其他更接近的这并不能改变的。不要使用身体的造型可能会导致它无法接收冒泡鼠标事件。
note: document is just your fallback default if nothing else is closer that does not change. Do not use 'body' as styling can cause it to not receive bubbled mouse events.
这篇关于失去jQuery的委托事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
