[英]Javascript/JQuery not working until after page reload
此代码列在我所有网页的标题上。 当我单击网站上的链接时,在刷新之前我无法使用页面上的按钮。 我怎样才能解决这个问题?
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.faqElement').click(function() {
var faqElement = $(this);
var question = faqElement.find('.faqQuestion');
var answer = faqElement.find('.faqAnswer');
if (!answer.hasClass('activeFaqAnswer')) {
$('.faqElement').removeClass('flipButton');
faqElement.addClass('flipButton');
$('.activeFaqAnswer').css('max-height', '');
$('.faqAnswer').removeClass('activeFaqAnswer');
answer.css('max-height', 'none');
answer.css('max-height', answer.height());
answer.addClass('activeFaqAnswer');
}
});
});
</script>
这听起来与您的自定义脚本和Squarespace 的 AJAX 加载冲突:
有时,Ajax 可能会与嵌入的自定义代码或锚链接发生冲突。 Ajax 还可以干扰站点分析,仅在第一页上记录点击。
因此,根据您的模板,您可能会发现禁用 AJAX 是一个简单的解决方案:
您可以在样式编辑器中禁用 Ajax,但有一些例外:
- 无法在 Skye、Foundry 或 Tudor 中禁用 Ajax。
- 无法在 Farro 和 Haute 的博客登录页面上禁用 Ajax。 如果在这些模板中取消选中启用 Ajax 加载,它们仍将使用 Ajax 加载博客页面。
启用或禁用 Ajax:
- 在主菜单中,单击设计,然后单击样式编辑器。
- 向下滚动到站点:正在加载。
- 选中或取消选中启用 Ajax 加载。
如果您不想完全禁用 AJAX, 请参阅此答案中的“选项 2”以了解编写代码的方法,以便它可以在初始页面加载和 AJAX 页面加载时工作。
似乎 Ajax 会动态加载内容并破坏您的绑定。
您可以在每个 Ajax 请求之后使用$.ajaxComplete()
调用您的函数
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <script> function faqElementClick() { $('.faqElement').click(function() { var faqElement = $(this); var question = faqElement.find('.faqQuestion'); var answer = faqElement.find('.faqAnswer'); if (!answer.hasClass('activeFaqAnswer')) { $('.faqElement').removeClass('flipButton'); faqElement.addClass('flipButton'); $('.activeFaqAnswer').css('max-height', ''); $('.faqAnswer').removeClass('activeFaqAnswer'); answer.css('max-height', 'none'); answer.css('max-height', answer.height()); answer.addClass('activeFaqAnswer'); } }); }; $(document).ready(faqElementClick); $(document).ajaxComplete(faqElementClick); </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.