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

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 之间切换时 - 控制台在再次加载同一页面后返回奇怪的值。

例如：

1. 加载主文件，控制台没有返回 - 好的
2. 点击“下一步”按钮，控制台返回：

下一个测试1

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

test1 返回

test2 返回

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

下一个测试1

下一个测试2

5. 再次点击“返回”按钮（返回第1页），控制台返回：

test1 返回

test2 返回

test2 返回

test2 返回

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

下一个测试1

下一个测试2

下一个测试2

下一个测试2

1. 第三次点击“返回”按钮，控制台返回：

test1 返回

test2 返回

test2 返回

test2 返回

test2 返回

test2 返回

test2 返回

test2 返回

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

如何解决这个问题？

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

Answer 1

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

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

更新： 此外，您可以取消绑定 PHP 文件中的单击事件处理程序。 将此行代码添加到 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?

Answer 2

替换内容时，您的事件仍然受到约束。由于您的导航按钮没有改变，因此您继续向它们添加处理程序。在浏览器的检查器中检查绑定到您的元素的事件。并看看如何开启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 3

我和你有同样的问题。就我而言，我有静态导航栏和侧边栏（包含许多菜单和子菜单），并且内容由 ajax 动态加载。当我导航到另一个页面时出现问题，来自旧页面的旧事件仍在 jquery 事件侦听器中并进行重复事件触发。

这是我如何将事件绑定到内容中的每个动态元素的示例。

$("#content").on("click",'#add-btn', addButtonHandler)

所以在我从另一个页面获取 HTML 和脚本以存储在内容中之前。我必须取消绑定所有事件，以免出现重复事件。这是代码：

$('#content').off('', '')

之后我可以将数据存储到#content元素:)。

完整代码示例如何从另一个页面获取数据并删除所有事件：

$.ajax('http://localhost/test_ajax_content/p.html', {
      success: function (data) {
                  $('#content').off('', '')
                  $("#content").html(data)
              }
})