javascript - 收到额外的 ajax 请求(点击)?

标签 javascript jquery html css ajax

如果您单击此网站上的顶部导航按钮,我正在处理 http://techxpertschico.com/单击大约 5 次按钮后,您开始收到额外的 ajax 请求,您可以在检查器的网络部分看到这些请求。我无法弄清楚发生了什么导致这些额外的请求,所以我不确定要更改我的代码中的哪些内容。这个问题会导致极度滞后,并最终关闭体验,直到你刷新,所以……至少可以说,这对我的用户体验来说很糟糕。

这是一个典型的 anchor 标记

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

这是 anchor 的 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:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f084959398888095828483939899939fb0979d91999cde939f9d" rel="noreferrer noopener nofollow">[email protected]</a>" class="appointmentButton">Email TechXperts</a> 
<h1>Friendly staff always available to answer questions!</h1>

如果您还需要任何其他信息,请告诉我!

最佳答案

在每个加载的资源上,您都可以引用 <script src="scripts/scripts.js"></script>它将新的点击处理程序添加到 ajaxAnchor每当加载新页面时的元素。

改为使用事件委托(delegate)并仅在主页中包含此脚本

关于javascript - 收到额外的 ajax 请求(点击)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20832490/

相关文章:

javascript - 当我使用浏览器后退按钮时保持 javascript 更改(jquery,rails 3)

jquery - 创建 3 个 Div,在单击时展开并显示内容

javascript - 播放视频时调暗屏幕的缓和过渡效果

javascript - 解密AES十六进制消息完成与服务器的相互认证

javascript - 根据其值添加和减去选定的单选按钮

jquery - 根据下拉选择值显示/隐藏元素

html - 提交时如何在表单外发送数据-MVC,HTML

Javascript 在页面加载时预选文本区域

javascript - html css tr 设置宽度

javascript - 在 JavaScript 中检测 Apple Silicon mac