javascript - Ajax variable reuse buildup -

on getdata() use ajax request pull few li , append them container. on success of ajax call make variable called next_load gets data-attribute , passes url next data call. problem have on second click there build of variable on call. in console can see first date being passed second date well. goal on page load first dates. clicking on box next dates , on.

html:

<div id = "calendar">                 <div class = "box">                     <ul class = "label">                         <li>sun</li>                         <li>mon</li>                         <li>tue</li>                         <li>wed</li>                         <li>thur</li>                         <li>fri</li>                         <li>sat</li>                     </ul>                 </div>                 <ul class = "box-content">                  </ul>     </div> 

in console:

    2 calendar.js:34 2016-03-05 -> on first get, , next on second , keeps building up.  calendar.js:34 2016-04-09       function getdata(url) {     var next_load = '';     $.ajax({         url: 'student/calendar/' + url,         type: 'get',         success: function(response) {             var $result = $(response).filter('li');             $('.box-content').append($result);              next_load = $result.last().attr('data-date');             usenextload(next_load); // dont use value till ajax promise resolves here          }     }) } getdata('show/2016/02');  function usenextload(next_load){     var load = next_load;     $('.box').click(function(){        getdata('load/' + load);         console.log(load); // when pass next_load im getting previous next load , new next load @ same time. on next click amount compounds.     });  } 

if reset variable next_load keep build occuring? tried empty variable before ajax call still build up.

might issue click function being multiply applied .box. may want remove existing click handler .box before binding new one. see how remove click event handlers in jquery

function usenextload(next_load){ var load = next_load;  $('.box').off("click");  // remove click handlers on .box $('.box').click(function(){  ... 

of course, can chain calls in jquery if want more compact.