Question

我对jQuery Ajax有问题。我有一个加载功能：

将第一页加载到#my_div
ajax.php文件将下一页或上一页加载到#my_div。

我还要补充一点，这是一个非常简化的模式，我最终拥有许多功能和东西。我在这里提出一个基本问题。

主文件：

<div>
    <div id="my_div"></div>
    <button id="prevstep">back</button>
    <button id="nextstep">next</button>
</div>
<script>
    jQuery("#my_div").load("http://localhost/ajax.php?section=page1");
</script>

ajax.php文件：

<?php
if ($_GET["section"] == "page1") {
    ?>
    <div>something part 1</div>
    <script>
        $("#prevstep").on("click", function() {
            console.log("test1 back");
            jQuery("#my_div").load("http://localhost/ajax.php?section=page0");
        });
        $("#nextstep").on("click", function() {
            console.log("test1 next");
            jQuery("#my_div").load("http://localhost/ajax.php?section=page2");
        });
    </script>
    <?php
} elseif ($_GET["section"] == "page2") {
    ?>
    <div>something part 2</div>
    <script>
        $("#prevstep").on("click", function() {
            console.log("test2 back");
            jQuery("#my_div").load("http://localhost/ajax.php?section=page0");
        });
        $("#nextstep").on("click", function() {
            console.log("test2 next");
            jQuery("#my_div").load("http://localhost/ajax.php?section=page2");
        });
    </script>
    <?php
}
?>

站点正常工作（jquery库是正确的，控制台不会返回任何错误），但是当我在page1和page2之间切换时-控制台在再次加载同一页面后返回了奇怪的值。

例如：

加载主文件，控制台什么也没返回-好的
单击“下一步”按钮，控制台返回：

test1下一个

单击“后退”按钮（从第2页返回到第1页），控制台返回：

test1返回

test2返回

再次单击“下一步”按钮（转到第2页），控制台返回：

test1下一个

test2下一个

再次单击“后退”按钮（返回到第1页），控制台返回：

test1返回

test2返回

第三次单击“下一步”按钮，控制台返回：

test1下一个

test2下一个

第三次单击“返回”按钮，控制台返回：

test1返回

test2返回

每次下一页再次加载时，脚本都会重复。

如何解决此问题？

顺便说一句。我使用的是jQuery v2.2.3。

Answer 1

替换内容时，您的事件仍然受约束。由于导航按钮不变，因此您继续向其添加处理程序。在浏览器的检查器中检查绑定到您的元素的事件。并看看如何启用off处理程序。

或者，您可以找到一种替代方法来跟踪当前/上一页/下一页，而无需重新附加处理程序并完全避免问题，如下一个示例所示。

这将单独跟踪当前页面（请确保更新nextstep处理程序中的页面数）：

(function() {
  var page = 1;

  $("#my_div").load("http://localhost/ajax.php?section=page1");

  $('#prevstep').click(function() {
    if (page > 1) {
      page = page - 1;
      load();
    }
  });

  $('#nextstep').click(function() {
    // Check your bounds
    page = page + 1;
    load();
  });

  function load() {
    $('#my_div').load("http://localhost/ajax.php?section=page" + page);
  }
})();

使您的示例php减少为：

if ($_GET["section"] == "page1") {
    ?>
    <div>something part 1</div>
    <?php
} elseif ($_GET["section"] == "page2") {
    ?>
    <div>something part 2</div>
    <?php
}

但是如果您的示例php被删减了，这可能对您不起作用。

Answer 2

您必须将脚本移动到“主文件”。

每次页面更改时，PHP文件中的脚本都会一遍又一遍地加载和执行，并且每次都会添加额外的“点击事件”。

更新：另外，您可以取消绑定PHP文件中的click事件处理程序。将以下代码行添加到PHP文件中的脚本中：

$('#myimage').unbind('click'); //jquery <1.7

或

$('#myimage').off('click'); //jquery >3.0

例如：

<script>
    $('#nextstep').unbind('click');
    $('#prevstep').unbind('click');        
    $("#prevstep").on("click", function() {
        console.log("te.......

Best way to remove an event handler in jQuery?

jQuery Ajax-加载函数重复单击事件处理程序

2 个答案: