jQuery hide 不隐藏 vb.net/asp.net webform 中的任何内容

Question

我试图通过单击按钮来隐藏我的内容。但是页面加载时，内容是隐藏的，但是页面加载完成后会显示内容。此内容不隐藏。我正在使用 Visual Studio 2017 社区和 asp.net/vb.net 框架。但是相同的 JQuery 代码正在我的文本编辑器和浏览器上运行。 这是我的示例代码：

<p id="justp" class="testcls">Hi Hide me!</p>
    <asp:Button ID="testbtn" runat="server" Text="hide me" />
     <script>
        $(function () {
            $('#testbtn').click(function () {
                $('.testcls').hide();

            });
        });
    </script>

我尝试在 hide() 中传递警报，它运行成功：

$('.testcls').hide(alert("Hello"));

有什么问题？ 我该如何解决这个问题？

Answer 1

如果您只是使用此按钮在客户端隐藏/显示您的内容（没有服务器端计算或类似的东西），请使用普通的 input / button 标签：

替换这个： <asp:Button ID="testbtn" runat="server" Text="hide me" />

用这条线： <button type="button" id="testbtn">Hide me!</button>

如上所述，此解决方案仅在您不需要提交任何数据时才有效。

Answer 2

有什么问题？

该按钮在点击后提交您的表单，因此页面将被刷新，视图将返回默认状态。

我该如何解决这个问题？

您有几种方法可以改变这种行为：

1. 如果您对 asp 代码有控制权，您可以删除 runat="server" 以防止按钮提交：

   <asp:Button ID="testbtn" Text="hide me" />
   

2. 您可以简单地在事件结束时添加return false; 语句。

3. 另一种方法是使用preventDefault() 来防止默认行为，例如：

   $('#testbtn').click(function (e) {
       e.preventDefault();
   
       $('.testcls').hide();
   });
   

4. 我推荐给你的是UseSubmitBehavior：

   <asp:Button ID="testbtn" runat="server" UseSubmitBehavior="false" Text="hide me" />
   

5. 最后的选择是使用纯 HTML 代码，例如：

   <button type="button" id="testbtn">Hide me!</button>