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

Question

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

我有一个非常简单的 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>

Answer 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!');
        }   
    });
});