javascript - losing jquery Delegated Event Handler -

javascript - losing jquery Delegated Event Handler -

i've stuff when changed occure in textbox in gridview.. i've:

$(function () { $('.mgrid').on('change', 'input[id*="txtvalore"]', function () { alert('change!!'); (...) }); });

the situation is:

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

rendered this:

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

in first gridview i've imagebutton sec griview databound , switch panels visibility..in sec panel i've imagebutton, outside gridview, opposite.. think both of postback, because can see entire page reloaded.. behaviour is, when first time page loaded if alter first grid textbox text can see alert. after click imagebutton , switch sec panel, event not fired when alter text on sec grid , if come first panel, don't work anymore not first one.. problem?

if button "that switches panels" replaces current grid, need delegate higher non-changing ancestor:

e.g. document

$(function () { $(document).on('change', '.mgrid input[id*="txtvalore"]', function () { alert('change!!'); (...) }); });

this reads as... if alter event bubbles document, run '.mgrid input[id*="txtvalore"]' selector find element caused it, then fire function against element.

note: document fallback default if nil else closer that not change. not utilize 'body' styling can cause not receive bubbled mouse events.

javascript c# jquery asp.net gridview