ModalPopup 关闭后，jQuery 停止工作

Question

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

我所做的是使用 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

Answer 1

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

了解此处和这里 基本上是模式弹出窗口的第二次，元素不再是 DOM 的一部分，所以你有 更新：在阅读更多内容

后，您最好使用 delegate 而不是 live 来缩小范围。 <一href="http://shaneriley.tumblr.com/post/1679999567/when-you-should-use-jquerys-live-and-delegate-methods" rel="nofollow noreferrer">此处。