После функции загрузки JQuery остальная работа JavaScript перестает работать

Question

У меня есть страница с обратным отсчетом JavaScript и всплывающей подсказкой Bootstrap JavaScript. Они работают очень хорошо, пока я не перезагружу страницу функцией jQuery load();.

После того, как я запускаю функцию load(); через пару секунд после загрузки страницы, другой JavaScript перестает работать.

Проверьте мою страницу: http://areafordemos.freeoda.com/reload.html

Я не понимаю, почему простое обновление является причиной этого, и как решить эту проблему? Я попытался поместить код JavaScript в другие места, но без помощи.

Вот мой код JavaScript:

//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

При привязке события к элементу в JavaScript, обработчик будет жить на самом элемент, а не держать ссылку на это класс так, когда вы перезарядить новое содержимое на странице, JS больше не будет привязано к ним.

Вы можете сделать (по крайней мере) две вещи, чтобы исправить вашу проблему.

Один из них состоял бы в повторном запуске JS путем повторного вызова функций.

например. Всякий раз, когда вы делаете $.load, вы можете добавить обратный вызов, который должен быть запущен после. Это делается при загрузке содержимого страницы.

Например:

$('.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 
}); 

Вы также можете попробовать, глядя в делегации событий, но это служит различным целям, как автоматически связывании события для вновь добавленных элементов в DOM, слушая на родителей, а и дать пузырь событий для дети.