模态弹出窗口关闭后，jQuery 停止工作答案

【问题标题】：After ModalPopup closed, jQuery stops working模态弹出窗口关闭后，jQuery 停止工作
【发布时间】：2011-07-26 14:53:44
【问题描述】：

场景
作为“查看案例”页面的一部分，应该有一个添加新案例注释的功能。
案例注释可以“在外部可见”，并可选择提供不同的“外部”文本。

我所做的是使用来自 ASP.NET Ajax 控件工具包的ModalPopupExtender，当单击“添加注释”按钮时会触发该工具包，以显示带有文本框的面板以输入新注释。文本框下方有一个CheckBox，如果注释在外部可用，用户可以勾选。

勾选后，一些 jQuery 会触发，它会在“公共笔记内容”框中淡出，并将其预设为“笔记内容”文本框的值。

输入公共文本后，用户应单击“保存注释”。笔记写入数据库，笔记的GridView被反弹，ModalPopup隐藏。

jQuery 在Page_Load 上被引用一次，如下所示。

ScriptManager.RegisterClientScriptInclude(Me, Me.GetType, "BensJQuery", Page.ResolveUrl("~/include/BensJquery.js"))

问题：
然后用户可能想要添加第二个注释。他们再次单击“添加注释”，ModalPopupExtender 再次显示模式弹出窗口。这一次，如果他们单击“外部可用”复选框，则 jQuery 不会触发。公共笔记内容区域不显示。测试alert() 不显示。

如果用户单击“取消”但实际上并未添加注释，则会出现同样的问题。 ModalPopup 将消失，但如果他们随后尝试添加注释，则无法正确使用它。

标记

<asp:UpdatePanel ID="updNotes" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:GridView ID="gvNotes" runat="server" AllowPaging="true" PageSize="10" AutoGenerateColumns="false" Width="100%">
            <PagerSettings Mode="NumericFirstLast" Position="TopAndBottom" />
            <Columns>
                <asp:BoundField HeaderText="Date" DataField="CreationDate" />
                <asp:BoundField HeaderText="Author" DataField="CreatedBy" />
                <asp:BoundField HeaderText="Note" DataField="Text" ItemStyle-Width="80%" />
            </Columns>
        </asp:GridView>                                

       <p><asp:Button ID="btnAddNewNote" runat="server" Text="Add note" CssClass="addButton" CausesValidation="false" /></p>

        <asp:Panel ID="pnlNewNote" runat="server" GroupingText="New note" style="display: none;" CssClass="mdlPopupPanel">
            <p>To add a new note, enter the note information here and click 'Add note'</p>

            <scc:TextBox runat="server" ID="txtNewNoteContent" TextMode="MultiLine" CssClass="mainNoteContent input"
            Rows="6" Width="75%" Label="Text" ValidationGroup="NewNote" /> 

            <p>
                <asp:CheckBox ID="chkMakeAvailExternally" CssClass="chkAvailExternally" runat="server" />
                <asp:Label runat="server" Text=" Note is available to public" AssociatedControlID="chkMakeAvailExternally" />
            </p>

            <div class="publicNoteContent" style="display: none;">
                <scc:TextBox ID="txtPublicNoteContent" runat="server" Label="Text to show to public" 
                 TextMode="MultiLine" Rows="6" Width="75%" CssClass="publicNoteContent input" Required="false" />
            </div>

            <p>
                <asp:Button ID="btnSaveNote" runat="server" CssClass="confirmButton" Text="Save note" ValidationGroup="NewNote" />
                <asp:Button ID="btnCancelAddNote" runat="server" CssClass="cancelButton" Text="Cancel" CausesValidation="false" />
            </p>

        </asp:Panel>       
        <act:ModalPopupExtender ID="mpopNewNote" runat="server" TargetControlID="btnAddNewNote" PopupControlID="pnlNewNote" />

    </ContentTemplate>
</asp:UpdatePanel>

jQuery

$(document).ready(function () {
    $(".chkAvailExternally").click(function (event) {
        alert('test'); // This alert displays for the first note added but not subsequent notes

        var publicNoteDiv = $(this).parent().parent().find('div.publicNoteContent');

        if (publicNoteDiv.is(":visible")) {
            publicNoteDiv.fadeOut();
        }
        else {
            var existingText = publicNoteDiv.parent().find('textarea.mainNoteContent').text();
            if (publicNoteDiv.find('textarea.publicNoteContent').text() == '') {
                publicNoteDiv.find('textarea.publicNoteContent').text(existingText);
            }
            publicNoteDiv.fadeIn();
        }
    });    
});

代码隐藏

Protected Sub btnSaveNote_Click(sender As Object, e As System.EventArgs) Handles btnSaveNote.Click
    Dim CaseRef As String = Request("CaseReference")
    Using ctx As New CAMSEntities
        Dim c As [Case] = ctx.Cases.Single(Function(x) x.Reference = CaseRef)

        c.AddNote(txtNewNoteContent.Text, chkMakeAvailExternally.Checked, txtPublicNoteContent.Text)

        ctx.SaveChanges()

        gvNotes.DataSource = c.Notes.OrderByDescending(Function(x) x.CreationDate).ToList
        gvNotes.DataBind()

        txtNewNoteContent.Text = String.Empty
        chkMakeAvailExternally.Checked = False
        txtPublicNoteContent.Text = String.Empty
    End Using
End Sub

【问题讨论】：

标签： jquery asp.net modalpopupextender

【解决方案1】：

不要直接使用$(".chkAvailExternally").click(，而是使用$(".chkAvailExternally").live("click",function(){.。

阅读here 和here。基本上是第二次弹出模式，元素不再是 DOM 的一部分，所以你必须为它们附加一个事件处理程序。

更新：在阅读了更多内容之后，也许您最好使用delegate 而不是live 来缩小范围。更多信息here.

【讨论】：