javascript - 丢失 jquery 委托(delegate)事件处理程序

Question

当 GridView 中的 TextBox 发生更改时，我必须做一些事情。所以我:

$(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 中，我还有一个 ImageButton，它执行第二个 griview 数据绑定(bind)并切换面板可见性。在第二个面板中，我在 GridView 之外有另一个 ImageButton，它的作用相反。我认为两者都是进行回发，因为我可以看到整个页面已重新加载。现在的行为是，当第一次加载页面时，如果我更改第一个网格 TextBox 文本，我可以看到警报。单击 ImageButton 并切换到第二个面板后，更改第二个网格上的文本时不会触发该事件，如果我返回第一个面板，即使第一个面板也不再起作用。可能是什么问题？

Answer 1

如果您的“切换面板”按钮替换了当前网格，您需要将其委托(delegate)给更高不变的祖先:

例如文档

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

这现在读作...如果任何更改事件冒泡到 document，请运行 '.mGrid input[id*="txtValore"]' 选择器找到导致它的元素，然后针对该元素触发函数。

注意: 如果没有其他更接近且不会改变的情况，document 只是您的后备默认值。不要使用'body'，因为样式可能会导致它无法接收冒泡鼠标事件。