CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
CodeManiak
CodeManiak

Reputation: 1953

Getting extra ajax requests on(click)?

If you click on the top nav buttons on this website I'm working on http://techxpertschico.com/ you start getting extra ajax requests after maybe 5 button clicks which you can see in the network section of the inspector. I can't figure out whats happening to cause these additional requests so I'm not sure what to change in my code. This issue causes extreme laggyness and eventually shuts down the experience until you refresh so... its bad for my UX to say the least.

Here is a typical anchor tag

<a class="ajaxAnchor" href="home.html">
    <div id="navOne" class="top">
        <span class="top">Home</span>
    </div>
</a>

This is the jQuery for the anchors

$('.ajaxAnchor').on('click', function (event){ 
    event.preventDefault(); 
    var url = $(this).attr('href');
    $.get(url, function(data) {
        $('section.center').html(data);
    });
});

This is example html that gets loaded by the Home Button in this case

<script src="scripts/scripts.js"></script>
<h1>Welcome to TechXperts Chico!</h1>
<p>
    Welcome to the home of TechXperts! We are a computer, phone, and tablet repair shop located in Chico! We try to create a friendly and comfortable place for you to learn more about technology! Whether buying a new computer or trying to get the one you have to do what you want, everyone needs tech help at times. We offer a full range of repairs and tutorials to help you get the most out of your technology. If you have any questions feel free to call our office, or book an appointment below! Our goal is to help you to understand your device! We feel that is our responsibility to the community as the local computer experts. 
</p>
<a href="https://techxpertschico.youcanbook.me/" class="appointmentButton">Book Appointment Now</a>
<a href="mailto:[email protected]" class="appointmentButton">Email TechXperts</a> 
<h1>Friendly staff always available to answer questions!</h1>

If you need anything else please let me know!

Upvotes: 2

Views: 57

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388406

On every loaded resource, you have reference to <script src="scripts/scripts.js"></script> which is adding a new click handlers to the ajaxAnchor elements whenever a new page is loaded.

Instead use event delegation and include this script only in the main page

Upvotes: 2

Related Questions