I have developed an application with push state functionality and it is running smoothly. However, I am facing an issue where my jQuery functions are being triggered multiple times in certain cases. This happens because every time I call push state, the specific JavaScript file for each page is bound again. As a result, the same JavaScript functions are repeatedly bound to the HTML as I navigate through my pages.
Hint: To ensure that my function is connected to dynamically loaded HTML via Ajax, I am using document.on in my jQuery function.
I attempted to use off in the push state before loading the content, but unfortunately, it did not resolve the problem!
Below is a snippet of my code:
var requests = [];
function replacePage(url) {
var loading = '<div class="push-load"></div>'
$('.content').fadeOut(200);
$('.container').append(loading);
$.each( requests, function( i, v ){
v.abort();
});
requests.push( $.ajax({
type: "GET",
url: url,
dataType: "html",
success: function(data){
var dom = $(data);
//var title = dom.filter('title').text();
var html = dom.find('.content').html();
$('a').off();
$('.push-load').remove();
$('.content').html(html).fadeIn(200);
$('.page-loader').hide();
$('.load-a').fadeIn(300);
}
})
);
}
$(window).bind('popstate', function(){
replacePage(location.pathname);
});
Thank you for your assistance!