javascript - 脚本运行多次

Question

我有这个脚本，它使用菜单结构替换 div 中的内容。 这工作正常，除了它在单击各种菜单项时运行多次。这使得页面加载非常慢。

这是我的结构:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

还有一个控制台屏幕截图，您可以在其中看到脚本正在成倍增加...

我不知道为什么会这样。任何帮助都会非常好......

Answer 1

看起来您的带有 eventhandler 的 js 代码被加载了不止一次。你最好找出原因。

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

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