【问题标题】:Shopify - Jquery not executingShopify - Jquery 未执行
【发布时间】:2015-11-14 19:09:12
【问题描述】:

我正在尝试在我的 shopify 页面中执行 Jquery。但是 Jquery 没有被执行。当我在 jsfiddle 中使用相同的代码时,代码正在工作(我收到警报消息,但是当我在 shopify 中执行相同的 jquery 时,我没有收到警报消息)。

这里是 jsfiddle 的链接 - https://jsfiddle.net/tusharacc/ck84ad6z/1/

代码与我在 shopify 中使用的代码相同。

HTML 代码包含在 index.liquid 中。 javascript 被上传到 Assets 文件夹中。

Theme.liquid 引用了我的 javascript 文件。此外,主题引用了 lquery.min.js,它包含在我的 javascript 文件之前。

{% include 'oldIE-js' %}

{{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}
{{ 'modernizr.min.js' | asset_url | script_tag }}

{{ 'readjson.js' | asset_url | script_tag }}

我已经检查了下面的 shopify 文档,但我不清楚我还需要做什么。 https://docs.shopify.com/api/unlinked/using-javascript-responsibly

任何指针将不胜感激。

已编辑**

根据 shopify 指令,我复制了以下代码来加载执行 jquery。但是,代码仍然无法正常工作,当我调试时,控件一直运行到 loadscript("//ajax...) 之后不知道发生了什么。我尝试 try-catch 显示错误,但我没有得到。

function loadjquery(){  
alert("hi");
var loadScript = function(url, callback){

var script = document.createElement("script")
script.type = "text/javascript";

if (script.readyState){  //IE
    script.onreadystatechange = function(){
        if (script.readyState == "loaded" ||
                script.readyState == "complete"){
            script.onreadystatechange = null;
            callback();
        }
    };
} else {  //Others
    script.onload = function(){
        callback();
    };
}

};  
var myAppJavaScript = function($){
/* Your app's JavaScript here.
   $ in this scope references the jQuery object we'll use.
   Don't use 'jQuery', or 'jQuery191', here. Use the dollar sign
   that was passed as argument.*/
$('body').append('<p>Your app is using jQuery version '+$.fn.jquery+'</p>');
};

if ((typeof jQuery === 'undefined') || (parseFloat(jQuery.fn.jquery) < 1.7)) {
  loadScript('//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', function(){
    jQuery191 = jQuery.noConflict(true);
    myAppJavaScript(jQuery191);
  });
} else {
  myAppJavaScript(jQuery);
}
}

【问题讨论】:

  • 抱歉,这太离谱了。 jQuery 部分只需要:&lt;script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'&gt;&lt;/script&gt; 您不需要加载器或脚本标签。
  • @bknights,那部分行已经存在,但 Jquery 仍然没有执行。
  • 您是否在可公开访问的 Shopify 页面上有此内容?
  • 我个人尽量避免在 shopify 脚本标签上使用 JQuery。我发现它有问题。当我花时间用 vanilla JS 编写代码时,它似乎解决了我遇到的所有问题。

标签: jquery shopify


【解决方案1】:

所有 Shopify 页面默认包含 jQuery,您不必再次包含该文件。

如果加载了 jQuery,请在控制台中检查。如果未加载,则需要包含该文件。

如果已加载,请尝试在元素中使用 onchange="alert('hi')" 以检查是否确实发生了更改。如果收到警报,请尝试通过$('.....').on("change",function(){alert('hi')} 绑定元素并检查。如果这有效,请尝试记录错误。您应该立即找出问题所在。

【讨论】:

    【解决方案2】:

    看看他们怎么说:Use jQuery responsibly

    您必须手动加载 jQuery。

    尝试在 jsfiddle.com 站点中从 Frameworks & Extensions

    中选择 No wrap - in &lt;head&gt;

    默认选项是onLoad

    您必须手动加载 jQuery 库。

    【讨论】:

    • 感谢您的回复。我是网络编程的新手,因此无法理解它。我想,在 head 中包含 Jquery 库就足够了。话虽如此,我按照代码中给出的说明进行操作,但我无法调用 Jquery。
    • 欢迎,尝试在您的站点中包含此脚本:
    • 我只有一个问题(我很可能遗漏了什么)。链接中的代码与我所拥有的代码相似,只是代码是自执行匿名函数,因此它会立即执行。但是在我的情况下,代码需要在下拉更改后执行。因此存在差异。
    猜你喜欢
    • 1970-01-01
    • 2021-11-01
    • 2013-07-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-12-08
    • 2013-01-03
    • 2011-08-22
    相关资源
    最近更新 更多