获取额外的ajax请求(点击)?

时间:2013-12-30 02:27:28

标签: javascript jquery html css ajax

如果您单击此网站上的顶部导航按钮我正在http://techxpertschico.com/,您可以在检查员的网络部分中看到5次按钮后开始获得额外的ajax请求。我无法弄清楚发生了什么导致这些额外的请求,所以我不知道在我的代码中要改变什么。这个问题导致极度滞后,并最终关闭体验,直到你刷新......这对我的用户体验至少说不好。

这是典型的锚标记

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

这是锚点的jQuery

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

这是在这种情况下由主页按钮加载的示例html

<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:techxpertschico@gmail.com" class="appointmentButton">Email TechXperts</a> 
<h1>Friendly staff always available to answer questions!</h1>

如果您还有其他需要,请告诉我们!

1 个答案:

答案 0 :(得分:2)

在每个加载的资源上,您都引用<script src="scripts/scripts.js"></script>,只要加载新页面,就会向ajaxAnchor元素添加新的点击处理程序。

而是使用事件委派,并仅在主页

中包含此脚本