丢失jquery委托事件处理程序

时间:2014-11-14 16:44:46

标签: javascript c# jquery asp.net gridview

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

1 个答案:

答案 0 :(得分:1)

如果您的“切换面板”按钮取代了当前网格,则需要将其委托回更高不变的祖先:

e.g。 document

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

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

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