使用 .hide() jquery 后 Div 重新出现

Posted 2023-02-24

【中文标题】使用 .hide() jquery 后 Div 重新出现

【英文标题】：Div reappears after using .hide() jquery

【发布时间】：2016-03-27 15:26:12

【问题描述】：

我检查了所有类似的问题并尝试了不同的解决方案，但完全没有运气。

我有一个非常简单的 div 来捕捉名字和姓氏。我想要做的是，如果输入框不为空，则发布到另一个页面（使用 jquery），删除或隐藏 div1 并显示 div2 来提问（div 2 被隐藏）。

由于某种原因，当我点击提交按钮时，姓名和姓氏被发布到另一个页面并存储在数据库中，但在警报之后，div1 重新出现，div 2 消失。有人可以帮我看看吗？

非常感谢！

jQuery 代码：

    <script>
        function saveDetailsToDB()
        

            var name = document.getElementById('name').value;
            var surname = document.getElementById('surname').value;

            if (name === "" && surname === "") 
            
                alert("Please, enter your details!");
                $("#UQ").css( "display", "none");   

            

            else if(name !== "" && surname === "")
            
                alert("Please, enter your Surname");
                $("#UQ").css( "display", "none");

            

            else if(name === "" && surname !== "")
            
                alert("Please, enter your Name");
                $("#UQ").css( "display", "none");
            
            else
            

                $.post("saveDetails.php", name: name,surname: surname );
                $("#detailsDiv").hide();
                $("#UQ").show();
                alert('You have been successfully registered!');

               
        
    </script>

html：

    <div id = "detailsDiv">
        <form>
            <b><label>Name:</label></b><br> 
            <input type = "text" id = "name"><br><br>

            <b><label>Surname:</label></b><br>
            <input type = "text" id = "surname"><br><br>
            <button onclick="saveDetailsToDB();">Send</button>
        </form>

    </div>

    <div id = "UQ">
    <b><label>Please enter your question.</label></b><br><br>
    <form>
        <textarea id = "question" rows="4" cols="40"></textarea><br><br>
        <button onclick="saveQuestionToDB()">Save</button>
    </form>
</div>

【参考方案1】：

问题是因为您没有阻止按钮单击的默认操作，因此页面会重新加载，从而使内容看起来像是重新出现。试试这个：

<button onclick="saveDetailsToDB(); return false;">Send</button>

或者更好的是，从您的 HTML 中删除过时的 onclick 属性并使用 javascript 附加事件：

<button class="btn-save">Send</button>

$(function() 
    $('.btn-save').click(function(e) 
        e.preventDefault();

        var name = $('#name').val();
        var surname = $('#surname').val();

        if (name === "" && surname === "") 
            alert("Please, enter your details!");
            $("#UQ").hide();
        
        else if(name !== "" && surname === "") 
            alert("Please, enter your Surname");
            $("#UQ").hide();
        
        else if(name === "" && surname !== "") 
            alert("Please, enter your Name");
            $("#UQ").hide();
        
        else 
            $.post("saveDetails.php",  
                name: name,
                surname: surname 
            );
            $("#detailsDiv").hide();
            $("#UQ").show();
            alert('You have been successfully registered!');
           
    );
);

【讨论】：

太棒了！谢谢一百万罗里！

没问题，很乐意提供帮助。