被 jQuery hide() 隐藏的 div 不断重新出现

Question

我的应用程序是一个留言板。当我单击 ans_button 时，会出现一个 div，其中包含问题的文本区域。当我提交问题时，消息 div 再次被隐藏。如果我单击 remove_button，该特定消息将从收件箱中删除，并且仍会显示剩余的消息。但是，只要我单击第二个 rmeove_button，消息 div 就会出现，此时它应该保持隐藏状态。最后，如果我刷新页面，我可以再次单击删除一次，但第二次会破坏代码。

我已将代码包含在我认为包含问题的代码中。但是，如果需要，我可以上传更多代码。任何关于我的代码在哪里被赶上的建议都将不胜感激。谢谢。

这是我的代码：

HTML：

<div class="content" id="messageView">
    <!--This content is pulled from a php file-->
        <!--.ans_button and .remove_button are echoed from php-->
</div><!--content#messageView-->
<div class="content" id="message">
    Subject:<input id="subject" type="text"><br><br>
    Question:<textarea id="question"></textarea><br><br>
    <input class="submitbutton" id="cancelQ" type="button" value="Cancel" >
    <input class="submitbutton" id="askQ" type="button" value="Respond" >       
</div><!--content#message-->

php:

$findMsg = mysqli_query($con,"SELECT * 
            FROM MessageAdmin m, Admin a, User u
            WHERE (SELECT deptID FROM Admin a WHERE a.deptID = m.programID)
            AND (SELECT o.threadID FROM OpenMessages o WHERE o.threadID = m.threadID
            AND o.isClosed = 0 AND (o.answeredBy = 0 OR o.answeredBy = '$curUser')
            AND (u.userID = o.userID) AND (m.userID = o.userID)) ORDER BY m.timeSent");
        if(mysqli_num_rows($findMsg) > 0){
            echo "<table id='viewMsg'>";
            while($row = mysqli_fetch_array($findMsg)){
                echo "<tr>";
                echo "<td>" .$row['firstName']." ".$row['lastName']."</td>";
                echo "<td>" .$row['subject']."</td>";
                echo "<td><button class='ans_button' 
                    value='".$row['threadID'].'*'.$row['subject'].'*'.$row['programID']."'>Respond</button></td>";
                echo "<td><button class='remove_button' 
                    value='".$row['threadID'].'*'.$row['timeSent']."'>Delete</button></td>";
                echo "</tr>";       
            }
            echo "</table>";
        }
        else
            echo "<h3>You currently have no messages</h3>"; 

jQuery：

$(function(){   
    $("#message").hide();
    var request1 = $.ajax({ //fill content of #messageView
        ...
    }).success(function(data){
        $("#messageView").html(data);
    });

    $('.content').on('click', '.ans_button', function(){
        var clicked = $(this);
        var parts = clicked.val().split("*");
        var thread = parts[0];
        var subject = parts[1];
        var program = parts[2];
        $("#subject").val(subject);

        $("#askQ").on('click', function(){                      
            var question = $("#question").val();
            var request2 = $.ajax({
                ...
            }).success(function(data){
                if(data == "success"){
                    $("#message").hide();
                    $("#question").val("");
                }
            });
        });
    });

    $('.content').on('click', '.remove_button', function(){
        var clicked = $(this);
        var parts = clicked.val().split("*");
        var thread = parts[0];
        var time = parts[1];
        var request3 = $.ajax({
            ...
        }).success(function(data){
            if(data == "success"){
                $("#message").hide();   
                $("html").load("messages.php");
               $("#messageView").show();                    
            }       
        });
    });
}); //end of document.ready

Answer 1

编辑：这里有很多“错误”，伙计。

首先，您在 click 函数中有一个 click 函数。我已经解决了。

您也不应该将.messages.php 加载到html 标记中。删除messages.php 中的正文标签并将负载（即.load()）应用于容器选择器（根据我们的私人聊天和我下面的代码）。

要防止在单击按钮时刷新页面（这会破坏使用 ajax 的目的），您需要阻止按钮的默认行为并使用 return false 来防止页面刷新。

此外，您将 ajax 调用作为变量（不会在任何地方被调用。即使它们被调用，也很草率。）。这也不对。我已经解决了这个问题。

最后，我添加了代码以防止在单击按钮时多次单击/提交。基本上，我所做的只是在单击按钮后禁用该按钮，然后在 ajax 成功调用中重新启用它。

$(function(){ 

    $("#message").hide();

    $.ajax({ //fill content of #messageView
        ...
    }).success(function(data){
        $("#messageView").html(data);
    });

    $('.ans_button').on('click', function() {
        var parts = $(this).val().split("*");
        var thread = parts[0];
        var subject = parts[1];
        var program = parts[2];
        $("#subject").val(subject);        

        return false;
    });

    $('#askQ').on('click', function() { 

        // disable button on click
        $(this).attr("disabled", "disabled");

        var question = $("#question").val();
        $.ajax({ 
            ...
        }).success(function(data){
            if(data == "success"){
                $("#message").hide();
                $("#question").val(""); // why is this empty? Try using .reset() instead if you want to empty field

                // enable and remove disable attr
                $(this).removeAttr("disabled", "disabled");
            }
        });

        return false; 
    });

    $('.remove_button').on('click', function() {

        // disable button on click
        $(this).attr("disabled", "disabled");

        var clicked = $(this);
        var parts = clicked.val().split("*");
        var thread = parts[0];
        var time = parts[1];
        $.ajax({
            ...
        }).success(function(data){
            if(data == "success"){
                $("#message").hide(); 

                $(".container").load("messages.php");

                $("#messageView").show();  

                // enable and remove disable attr
                $(this).removeAttr("disabled", "disabled");                  
            }       
        });

        return false;
    });
});