losing jquery Delegated Event Handler

问题

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!!');
        (...)
    });
});

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

回答1:

If your button "that switches panels" replaces the current grid, you need to delegate it back to a higher non-changing ancestor:

e.g. document

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

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.

来源：https://stackoverflow.com/questions/26934872/losing-jquery-delegated-event-handler