jQuery hide 不会隐藏网络表单 vb.net/asp.net 任何内容

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>