Question

我有这个脚本，可以使用菜单结构替换div中的内容。除单击多个菜单项时可运行多次外，此方法运行良好。这使页面加载真的很慢。这是我的结构： $（document）.ready（function（）{ $（'a.nav-link'）。click（function（e）{ var datalist = $（this）.data（'value'）; var dataname = $（this）.data（'name'）; console.log（数据列表，数据名）; $（“。content_div”）。hide（）。delay（500）.fadeIn（500）; $（“。content_div”）。load（数据名+“ .php”）; 返回false； }）; }）; <导航>

Aanwezig
Vervoer
Overige

还有控制台的屏幕截图，您可以在其中看到脚本在增加…… 我不知道为什么会这样。任何帮助都将非常棒...

Answer 1

看起来您的带有eventhandler的js代码已多次加载。您最好找出原因。

无论如何，您可以使用.off('click').on('click')来克服此问题（每次运行代码时，您都将取消现有的eventhandler（off()）并设置一个新的on()

$('a.nav-link').off('click').on('click', function(e){ ...});

Answer 2

就像其他人已经说过的那样，脚本本身可以正常工作，也许是因为您的脚本在页面中多次包含。

$(document).ready(function() {

  $('a.nav-link').on('click', function(e) {
  	e.preventDefault();
    
    var datalist = $(this).data('value');
    var dataname = $(this).data('name');
    
    console.log('datalist : ', datalist);
    console.log('dataname : ', dataname);
    
    $(".content_div").hide().delay(500).fadeIn(500);
    $(".content_div").load(dataname + ".php");
    
  });
});

<!DOCTYPE html>
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

<nav>
  <ul class="nav nav-tabs" id="top-nav" role="tablist">
    <li class="nav-item"><a class="nav-link active home" href="#" data-value="home" data-name="home">Aanwezig</a></li>
    <li class="nav-item"><a class="nav-link" href="#" data-value="vervoer" data-name="vervoer">Vervoer</a></li>
    <li class="nav-item"><a class="nav-link" href="#" data-value="extra" data-name="extra">Overige</a></li>
  </ul>
</nav>

<div class="content_div">

</div>
</body>
</html>

Answer 3

在$（document）.ready中放入一条日志语句

FAILED! => {"failed": true, "msg": "subelements lookup expects a list of two or three items, the optional third item must be a dict with flags skip_missing"}

要跟踪调用了多少document.ready。

要确保链接项上的“点击”事件仅被调用一次，您可以对代码进行一些更改

$(document).ready(function() {
  console.log('Ready');
  $('a.nav-link').click(function(e) {});
});

这是因为调用.click项意味着在该项上添加新的事件处理程序，而不是替换。

脚本多次运行

3 个答案: