Shopify应用程序主题扩展jQuery未加载/无法工作
Shopify应用程序主题扩展jQuery未加载/无法工作
提问于 2021-10-21 19:24:56
我正在尝试为shopify创建一个主题应用程序扩展，以便在单击add to cart按钮时运行一些javascript。举个例子：
<head>
<script type="text/javascript" src={{ 'jquery-3.6.0.js' | asset_url }} defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" rel="preload" defer="defer"></script>
</head>
...
<button id="add-btn">click me!</button>
<script>
jQuery( document ).ready(function() {
$('#add-btn').on('click', function(event){
alert("clicked")
})
});
</script>这是在blocks文件夹的工作表应用程序扩展中。
似乎jquery没有加载，我得到了一个错误
Uncaught ReferenceError: jQuery is not defined你知道为什么吗？
回答 1
Stack Overflow用户
发布于 2021-11-03 22:25:18
摘要：您正在使用defer关键字加载jQuery库，以便它不会阻止页面加载，而是在页面完成加载之前引用jQuery。
通过使用jQuery标记上的defer属性加载脚本，浏览器将立即开始加载脚本，但在加载DOM内容之前不会执行脚本：
<script type="text/javascript" src={{ 'jquery-3.6.0.js' | asset_url }} defer></script>但是，页面下方的内联脚本标记将在浏览器到达它时立即运行：
<script>
jQuery( document ).ready(function() { // ERROR! jQuery library hasn't been run yet, so we can't use jQuery to select the document!
$('#add-btn').on('click', function(event){
alert("clicked")
})
});
</script>由于延迟脚本是按照定义的顺序执行的，因此您的本能可能是尝试将defer关键字放在内联脚本标记上-但不幸的是，defer和async只适用于外部脚本文件。
有几种方法可以解决这个计时问题。有两种可能性：
1:将内联脚本移动到外部Javascript文件
如果创建外部JS文件，则可以使用defer关键字加载脚本，因为一旦DOM准备就绪，所有延迟的脚本就会按照它们被调用的顺序执行。额外的好处是，您不需要用jQuery(document).ready包装函数，因为您已经知道在脚本执行时文档已经准备好了。
2:使用普通Javascript而不是jQuery来设置事件侦听器
如果内联脚本标记有意义，那么使用vanilla Javascript来设置事件将解决您的问题。等效的代码是使用addEventListener函数侦听DOMContentLoaded事件：
<script>
// This event is created before the DOM is loaded, so jQuery doesn't exist yet
document.addEventListener('DOMContentLoaded', function() {
// This event will be run after the deferred scripts above, so jQuery exists now
$('#add-btn').on('click', function(event){
alert("clicked")
})
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69667731
复制相关文章
相似问题
腾讯云开发者
