I recently encountered some unexpected issues while debugging and playing around with the code on my website, . Let me walk you through the scenario to understand the problem better. When you click on the "art" tab, two logs appear in the console - one showing a script length of 5 and the other an ajax call of 1. However, I only have 4 known scripts in total. Moving on to the next tab, "music", the script length log shows 8 twice, along with two ajax calls as well. This pattern continues with each subsequent tab. I am seeking assistance not in the form of writing code for me but rather guidance in identifying and rectifying my mistakes so that I can improve my JavaScript skills. I am open to discussing the issue further and working collaboratively to resolve it. Here is a snippet of my code (please ignore the script check function meant for commenting out):
*For more detailed code, please visit my website at
function handlersAttached(){
$('.header a').on('click', ajaxLoad);
}
handlersAttached();
function ajaxLoad(e) {
console.log($("script").length);
console.log("ajax called");
e.preventDefault();
var url = $(this).attr("href");
var that = $(this);
that.off('click'); // remove handler
$.ajax({
url: url,
dataType: "html",
type: "GET",
cache: false
}).done(function(data){
$("#container").html(data);
})
};