CODEWITHSUNDEEP
javascriptjquery
Jay-oh
Jay-oh

Reputation: 456

Script runs multiple times

I have this script that replaces content in a div using a menu structure. This works fine, except it runs multiple times when clicking the various menu items. This makes the page load really slow.

Here is my structure:

$(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>

And a screenshot of the console where you can see the script is multiplying... enter image description here

I have no idea why this is happening. Any help would be really great...

Upvotes: 1

Views: 1826

Answers (3)

VinhNT
VinhNT

Reputation: 1101

Put a log statement in your $(document).ready

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

To trace how many the document.ready is called.

To make sure the 'click' event on your link item to be call only once, you can change the code a little bit

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

It is because of calling .click on an item means adding a new event handler on that item, not replacing.

Upvotes: 0

chebaby
chebaby

Reputation: 7730

Like other already said, the script itself work fine, maybe because your script it's included more than once in your page.

$(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>

Upvotes: 0

Programmer
Programmer

Reputation: 2123

It looks like your js code with the eventhandler is loaded more than once. You better figure out why.

Anyway, you can overcome this by using .off('click').on('click') (every time the code runs you cancel the existing eventhandler (off()) and set a new one (on()).

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

Upvotes: 1

Related Questions