jQuery Ajax - Load 函数重复单击事件处理程序 - jQuery Ajax - Load function duplicates click event handlers 小贝子编程网

我对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>

阿贾克斯.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 返回

再次单击"下一步"按钮(转到第 2 页(，控制台返回：

测试1 下一页

测试2 下一页

再次单击"返回"按钮(返回第 1 页(，控制台返回：

测试1 返回

测试2 返回

第三次我点击"下一步"按钮，控制台返回：

测试1 下一页

测试2 下一页

第三次我点击"返回"按钮，控制台返回：

测试1 返回

测试2 返回

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

如何解决这个问题？

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

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

每次页面更改时，来自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.......

在jQuery中删除事件处理程序的最佳方法？

替换内容时，事件仍受约束。由于导航按钮不会更改，因此您可以继续向其添加处理程序。在浏览器的检查器中检查绑定到元素的事件。并看看如何转动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 被削减，这可能不适合您。

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

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

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

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

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

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

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

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

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

相关内容

最新更新

热门标签：