丢失 jquery 委托事件处理程序答案

【问题标题】：losing jquery Delegated Event Handler丢失 jquery 委托事件处理程序
【发布时间】：2014-11-14 16:44:46
【问题描述】：

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

【问题讨论】：

标签： javascript c# jquery asp.net gridview

【解决方案1】：

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

例如document

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

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

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

【讨论】：