After JQuery load() function, rest of JavaScript stops working

Question

I have a page with a JavaScript countdown and Bootstrap's tooltip JavaScript. They work very well, until I reload the page with jQuery's load(); function.

After I trigger load(); function couple of seconds after page load, other JavaScript stops working.

Check my page: http://areafordemos.freeoda.com/reload.html

I don't understand why simple refresh is causing that, and how to solve this problem? I tried to place JavaScript code to other places but no help.

Here is my Javascript code:

//JavaScript code for load() after few seconds.
setTimeout(function(){

    $().ready(function() {
    $(".reloadthis").load("reload.html .reloadthis");
    });


}, 5000);

//JavaScript code for tooltip.
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});

//JavaScript code for countdown
function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.now();
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    if (t.total <= 0) {
      document.getElementById("clockdiv").className = "hidden-div";
      document.getElementById("timeIsNow").className = "visible-div";
      clearInterval(timeinterval);
      return true;
    }

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = '2016-01-01T12:00:00+02:00';
console.log(deadline);

initializeClock('clockdiv', deadline);

Answer 1

When you bind an event to an element in javascript, the handler will live on the element itself rather than keeping a reference to it's class so when you reload new contents in the page, the JS won't be bound to them anymore.

You can do (atleast) two things to fix your issue.

One of them would be to re-run your JS by redoing the function calls.

e.g. Whenever you do $.load you can add a callback that should run after it's done fetching the contents of the page.

For instance:

$('.reloadthis').load('reload.html .reloadthis', function(resp, status, xhr) {
    call_functions_again(); // psuedo, you'd want to re-call your functions here to make them work with ajax loaded content
});

You could also try looking into event delegation but this serves different purposes like automatically binding events to newly added elements in the DOM by listening on the parent instead and letting the event bubble to children.