javascript - Ajax 在每次调用中复制结果

Question

我有一个简单的ajax分页:

更多.js:

$(function() {
    $(".showmf").click(function(){  
        var info = $(this);
        $.ajax({
            type: "POST",
            url: "/more.php",
            dataType: 'html',
            data: info,
            success: function(data){
                $(".showmf").remove();
                $('.appdataf').append(data);
            }
        });
    });
});

更多.php

<script type="text/javascript" src="/more.js"></script>
<?php
echo"<div class='appdataf'>";   
for($i=0;$i<5;$i++){
   echo"$i";
}
echo"<span class='showmf'>MORE</span>"; 
echo"</div>";
?>

我第一次点击跨度就可以了:1 2 3 4 5

2次返回2个请求:1 2 3 4 5 更多1 2 3 4 5

3次返回3个请求:1 2 3 4 5 more 1 2 3 4 5 more 1 2 3 4 5

等等...

ajax 多次重复 PHP for 有什么问题吗？

Answer 1

这是因为当你加载时(即使是通过Ajax)more.php文件它还将加载 more.js文件(您可以在 fire bug 中查看)。

因为你写了<script type="text/javascript" src="/more.js"></script>在more.php .

那就是将点击事件重新绑定(bind)到 $(".showmf") (每次调用 Ajax 时)

解决方案

删除此代码<script type="text/javascript" src="/more.js"></script>来自more.php并将其放在在 Ajax 中调用时不会加载的位置