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

Posted

技术标签:

【中文标题】jQuery hide 不隐藏 vb.net/asp.net webform 中的任何内容【英文标题】:jQuery hide doesn't hide any content in vb.net/asp.net webform 【发布时间】:2019-01-15 11:06:58 【问题描述】:

我试图通过单击按钮来隐藏我的内容。但是页面加载时,内容是隐藏的,但是页面加载完成后会显示内容。此内容不隐藏。我正在使用 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"));

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

【问题讨论】:

当你点击按钮时,它会触发一个表单发布(PostBack)。那么客户端代码所做的所有更改都将丢失。 谢谢。我该如何解决这个问题? 为什么要发送表单帖子?是因为&lt;asp&gt;标签吗? @ShiroiTora 因为runat="server" 属性,但仅仅删除它可能会导致其他问题。 @ShiroiTora,是的,不是的。 asp:Button 将生成 input type=submit。提交按钮将触发表单发布。 【参考方案1】:

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

替换这个: &lt;asp:Button ID="testbtn" runat="server" Text="hide me" /&gt;

用这条线: &lt;button type="button" id="testbtn"&gt;Hide me!&lt;/button&gt;

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

【讨论】:

【参考方案2】:

有什么问题?

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

我该如何解决这个问题?

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

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

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

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

    另一种方法是使用preventDefault() 来防止默认行为,例如:

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

    我推荐给你的是UseSubmitBehavior

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

    最后的选择是使用纯 html 代码,例如:

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

【讨论】:

很抱歉,我正在尝试从您的答案中解决我的问题,但没有一个对我有用。 我已经用这段代码解决了我的问题&lt;button type="button" id="testbtn"&gt;Hide me!&lt;/button&gt; 但你的答案对我不起作用。

以上是关于jQuery hide 不隐藏 vb.net/asp.net webform 中的任何内容的主要内容,如果未能解决你的问题,请参考以下文章

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

jQuery-4.动画篇---动画基础隐藏和显示

jquery的hide和show方法疑问

jquery

jQuery 实例

jquery hide,show方法问题