Question

感谢您阅读本文，我正在建立一个网站。我有一个弹出框，询问你是否年满18岁。点击＆＃34;是＆＃34;后，我出现的论坛就出现了。当您单击回复按钮时，由于某种未知原因，弹出框会重新出现。那是为什么？

这是php文件。

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Umich Chan</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="index.js">
</script>


</head>
<body>

<div id="confirmage">
    <h2 style="text-align:center;">Are you older than 18 years old?</h2>
      <button id="close" style="display:block;margin-left:auto;margin-right:auto;margin-bottom:5px;">Yes</button>
      <button id="linknoclose" style="display:block;margin:auto;">No</button>
</div>

<div id="fadeina" style="opacity:0;">
<p>
</p>

<a href="addpost.html">Post Anonymously Now</a><br>

<br>


<?php 

// Connect to server and select database.
$con = mysqli_connect("$host", "$username", "$password", "$db_name") or die ("cannot connect"); 

$result = mysqli_query($con, "SELECT * FROM Table_forum ORDER BY `key` DESC");// 

// Start looping table row

while($rows = mysqli_fetch_array($result)){
$key=$rows['key'];
$name=$rows['name'];
$input=$rows['input'];

echo "<div class='answerbox'>";
echo '<font color="blue">' .$name. '</font>';
echo "<br />";
echo "$input.";
echo "<a class='reply' href=''>Reply</a>";
echo "</div>";
echo "<div class='replybox'><textarea></textarea></div>";

/*
echo "<div class='commentbox'>";
$namecomment = mysqli_query($con, "SELECT namea FROM `postcomments` WHERE keya = '1'");//
echo ".$name.";
$inputcomment = mysqli_query($con, "SELECT input FROM `postcomments` WHERE keya = '" .mysql_real_escape_string .$key."'");//
echo ".$inputcomment.";
echo "</div>";
*/
}
mysql_close();
?>

</div>
</body>
</html>

这是js文件。

$(document).ready(function() {
    $(".replybox").hide();
    $(".reply").css("color","blue");

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

    $(".reply").click(function(){
        $(".replybox").show();
    });

    $("#close").click(function(){
        $("#confirmage").remove();
    });

    $("#close").click(function(){
        $("#confirmage").empty();
    });

    $("#close").click(function(){
        $("#fadeina").fadeTo('slow',1);
    });

    $("#linknoclose").click(function(){
        history.back();
        return false; 
    });
});

Answer 1

弹出框重新出现，因为您的Reply链接为空href：

"<a class='reply' href=''>Reply</a>";

如RFC 2396中所述：不包含URI的URI引用是对当前文件的引用。换句话说，一个空的URI 文档中的引用被解释为对开头的引用该文件

尝试使用href="javascript:;"。

Answer 2

与<button>元素不同，“回复”锚点需要e.preventDefault()（或return false）来禁止其自然超链接行为，这会导致页面重新加载。

代码也将大大简化。

$(document).ready(function() {
    $(".replybox, #fadeina").hide();

    $(".reply").css("color","blue").on('click', function(e) {
        e.preventDefault(); //<<<<<<<<
        $(".replybox").show();
    });

    $("#close").on('click', function() {
        $("#confirmage").remove();
        $("#fadeina").fadeTo('slow', 1);
    });

    $("#linknoclose").on('click', function() {
        history.back();
    });
});

为什么我的jquery代码会出现动画故障？

2 个答案: