这是我的代码。它加载页面内容而不刷新。
问题是当我单击由 jQuery 和 ajax 处理的按钮时,它会在我加载页面时触发多次。
例如如果加载 2 个页面,jQuery 将触发两次
如果我加载 4 个页面,jQuery 将加载 4 次。
<script>
$(document).ready(function(){
//set trigger and container
var trigger = $('#nav ul li a'),
container = $('#container');
//do on click
trigger.on('click', function(e){
/***********/
e.preventDefault();
/* reload content without refresh */
//set loading img
$('#container').append('<div id = "loading">WAIT... <img src = "img/ajax-loader-small.gif" alt="Currently loading" /></div>');
//change img location to center
$("#loading").css({"position": "absolute", "left": "50%", "top": "50%"});
//get the trigger to reload the contents
var $this = $(this),
target = $this.data('target');
container.load(target + '.php');
// return false;
$(trigger).die('click');
});
});
当我通过 load() 函数加载页面时,此脚本会触发多次,这意味着同一篇文章将多次插入数据库
<script>
$(document).ready(function(){
$(document).on("click",".fa-pinterest-square",function(e) {
var form = $(this).find('form'); //Since the form is child to <i>
$.ajax({
url: "includes/widgets/add_pains.php",
type: "POST",
data: form.serialize(),
success: function(data) {
alert(data);
}
});
});
});
</script>
我该如何解决这个问题?
最佳答案
发生这种情况是因为你每次加载脚本时没有清除事件监听器,事件监听器相互堆叠导致多次触发。
trigger.off('click').on('click', function(){....})
.off()方法删除附加在 .on() 上的事件处理程序。
关于javascript - JQuery load() 使 Jquery 函数多次触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37382455/