Question

我正在尝试在单击按钮时显示表单。但它显示了一秒左右然后再次隐藏。我试图用console.log（）调试它，但我的jQuery没有到达Chrome控制台中的click事件中的匿名函数，它显示我这个错误＆＃34;无法加载资源：服务器响应状态为400（不良请求）＆＃34;这是我的代码

        <asp:Panel id="dynamicSubForm" class="container"  runat="server" DefaultButton="btnAdd" DefaultFocus="txtSegment">
            <div class="subForm">
                <div id="subHeader" class="divRow">
                    <div class="headCol">
                        <asp:Label ID="Label1" runat="server" 
                            Text="Sources"></asp:Label>
                    </div>
                </div>
                <div class="subFormRow">
                    <div>&nbsp</div>
                </div>
                <div class="subFormRow">
                    <div class="subFormFstCol">

                        <asp:Label ID="lblSource" runat="server" Text="Source:"></asp:Label>

                    </div>
                    <div class="subFormScndCol">
                        <asp:DropDownList ID="ddlSource" runat="server" 
                            CssClass="whiteCtrl" DataSourceID="dsIrrigationSource" 
                            DataTextField="title" DataValueField="id">
                        </asp:DropDownList>
                        <asp:SqlDataSource ID="dsIrrigationSource" runat="server" 
                            ConnectionString="<%$ ConnectionStrings:MIS4BOSConnectionString %>" 
                            SelectCommand="SELECT [id], [title] FROM [IrrigationSource]">
                        </asp:SqlDataSource>
                    </div>
                </div>
                <div class="subFormRow">
                    <div class="subFormFstCol">

                        <asp:Label ID="lblSegment" runat="server" Text="Area Segment:"></asp:Label>

                    </div>
                    <div class="subFormScndCol">
                        <asp:TextBox ID="txtSegment" runat="server" CssClass="whiteCtrl"></asp:TextBox>
                        %<br />
                        <asp:RegularExpressionValidator ID="revArea0" runat="server" 
                            ControlToValidate="txtSegment" Display="Dynamic" 
                            ErrorMessage="Percentage must be all digits." ValidationExpression="^[0-9]+$"></asp:RegularExpressionValidator>
                    </div>
                </div>
                <div class="subFormRow">
                    <div class="subFormFstCol">

                        <asp:Label ID="lblDesc" runat="server" Text="Description:"></asp:Label>

                    </div>
                    <div class="subFormScndCol">
                        <asp:TextBox ID="txtDesc" runat="server" Height="70px" TextMode="MultiLine" 
                            CssClass="whiteCtrl"></asp:TextBox>
                    </div>
                </div>
                <div class="subFormRow">
                    <div class="subFormFstCol">

                    </div>
                    <div class="subFormScndCol">
                        <asp:Button ID="btnAdd" runat="server" CssClass="blueBtn" Text="Add" 
                            onclick="btnAdd_Click" />
                        <asp:Button ID="btnAddCancel" runat="server" CssClass="whiteBtn" 
                            Text="Cancel" onclick="btnAddCancel_Click" />
                        <br />
                        <asp:Label ID="lblSubMsg" runat="server" CssClass="usrMsg" Text="Label" 
                            Visible="False"></asp:Label>
                    </div>
                </div>
            </div>
        </asp:Panel>
enter code here
<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function () {
        var subForm = $("#MainContent_dynamicSubForm");
        var addBtn = $("#irrAdd");

        console.log("before hide");
        subForm.hide();
        console.log("after hide");
        addBtn.on("click", function () {
            console.log('in anonymous func');
            subForm.show();
        });
    });
</script>

Answer 1

表单可能正在提交，就像这样做

addBtn.on("click", function (e) {
    e.preventDefault();
    console.log('in anonymous func');
    subForm.show();
});

请注意，标记中似乎不存在标识irrAdd，您还可以将按钮类型更改为button

Answer 2

使用jquery toggle（）;功能

$(document).ready(function () {
        var subForm = $("#MainContent_dynamicSubForm");
        var addBtn = $("#irrAdd");

        console.log("before hide");
        subForm.hide();
        console.log("after hide");
        addBtn.on("click", function () {
            console.log('in anonymous func');
            subForm.toggle();
        });
    });

表单显示和隐藏：jQuery

2 个答案: