Javascript Don';t两次加载同一JQuery加载文件
我有一个动态容器,当您通过从“数据目标”属性加载文件名来单击链接时,它会进行更新。我不希望同一个链接被点击两次,但是(有效地加载相同的页面两次) 有没有办法防止这种情况 JQuery:Javascript Don';t两次加载同一JQuery加载文件,javascript,jquery,html,Javascript,Jquery,Html,我有一个动态容器,当您通过从“数据目标”属性加载文件名来单击链接时,它会进行更新。我不希望同一个链接被点击两次,但是(有效地加载相同的页面两次) 有没有办法防止这种情况 JQuery: $(document).ready(function(){ // Set trigger and container variables var trigger = $('#nav ul li a'), container = $('#ajaxContainer'); /
$(document).ready(function(){
// Set trigger and container variables
var trigger = $('#nav ul li a'),
container = $('#ajaxContainer');
// Fire on click
trigger.on('click', function(){
// Set $this for re-use. Set target from data attribute
var $this = $(this),
target = $this.data('target');
// Load target page into container
container.load(target);
console.log(target);
// Stop normal link behavior
return false;
});
});
HTML:
我的网站
您可以删除数据目标
,并在加载()完成时重新设置它(在回调参数上):
您正在加载什么类型的文件?应该加载到页面的是js吗?它使用“数据目标”属性加载到PHP文件中。您可以简单地看到该属性消失并重新出现,但是它实际上并不能阻止同一个文件多次加载此代码准备加载一次,当它完全加载时,它允许重新加载如果您只想执行一次直到页面寿命结束,只需删除load()
回调函数(重设目标)即可。因此,该属性可以很好地删除,但load()仍然能够自我刷新。经过编辑,现在我编写了一个控制此行为的if()
。测试一下,然后告诉我:)
<DOCTYPE html>
<html>
<head>
<title>My Site</title>
<link rel="stylesheet" type="text/css" href="/css/main.css" />
</head>
<body>
<nav id="nav">
<ul>
<li><a href="#" data-target="/home.php">Home</a></li>
<li><a href="#" data-target="/modules/Movies/index.php">Movies</a></li>
</ul>
</nav>
<div id="ajaxContainer">
<img id="logo" src="/images/logo.png" />
<?php include('home.php'); ?>
</div>
<script src="/js/jquery-1.12.4.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
// Fire on click
trigger.on('click', function(){
// Set $this for re-use. Set target from data attribute
var $this = $(this),
target = $this.data('target');
$this.removeAttr('data-target'); // delete de target
// Load target page into container only if it's target set
if(target) {
container.load(target);
}
console.log(target);
// Stop normal link behavior
return false;
});