jquery - jquery加载功能显示内容两次

Question

我有一个名为 load.php 的页面，其中包含以下内容：

 <script>
        $(document).ready(function () {

            $("a").click(function () {          
                $("#mehdi").load(this.href, function(){
                 });
                return false;
            });
        });

    </script>

<a href="load.php?Name=mehdi"> click for load ajax</a>
<div id="mehdi">

<?php
    $db = new grid();
    $db->show();


    ?>

当我单击带有此内容a tag的页面帖子时：dbload.php

class grid
{
    function show()
    {
        echo"<div id = 'show'>";
        if(isset( $_GET["Name"] ))
            echo "done";
        else
            echo "Not done";
            echo "</div>";
    }
}

当我用浏览器看到页面时，它是这样的：

当我点击a tag它是这样的：

我的问题是第二个链接自动添加到页面。怎么了？

Answer 1

<a href="load.php?Name=mehdi"> click for load ajax</a>内移动<div id="mehdi">。这样当你打电话时它会被替换load

<script>
    $(document).ready(function () {

        $("a").click(function () {          
            $("#mehdi").load(this.href, function(){
             });
            return false;
        });
    });

</script>

<div id="mehdi">
    <a href="load.php?Name=mehdi"> click for load ajax</a>

<?php
    $db = new grid();
    $db->show();
?>

这将解决您的问题，但您应该真正考虑通过 ajax 调用加载不同的页面。也许ajax.php。这是因为内部的一切都在load.php自身内部重新渲染。因此，在 1 个 ajax 调用后：

<div id="mehdi">
  <a href="load.php?Name=mehdi"> click for load ajax</a>
  not done
</div>

将与此嵌套：

<div id="mehdi">
  <div id="mehdi">
    <a href="load.php?Name=mehdi"> click for load ajax</a>
    not done
  </div>
</div>

Answer 2

用这个：

$("a").click(function () { 
e.preventDefault()
...