Shopify, TypeError : $ (...). jcarousel은 함수가 아닙니다.

다른 제목으로이 동일한 제목을 보았습니다. 그리고 나는 그들이 가지고있는 동일한 문제를 겪고 있다고 생각하지 않습니다. 드루팔 (Drupal을 사용하지 않고 파일이 아래 보이는 것처럼 페이지 헤더에로드되는 것 같습니다). 나는 그 기능을 찾을 수 없다는 것을 이해하지만, 나는 그 이유를 모른다. 이것은 자바 스크립트와 스타일을 설정하는 곳 theme.liquid 헤드 내부의 코드입니다 :

<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <link rel="canonical" href="{{ canonical_url }}" /> 

    {% assign maxmeta = 155 %} 
    {% if template contains 'product' %} 
    <meta name="description" content="{{ product.description | strip_html | strip_newlines | truncate: maxmeta | escape }}" /> 
    {% elsif template contains 'page' %} 
    <meta name="description" content="{{ page.content | strip_html | strip_newlines | truncate: maxmeta | escape }}" /> 
    {% elsif template == 'index' and shop.description != '' %} 
    <meta name="description" content="{{ shop.description }}" /> 
    {% endif %} 


    {{ 'skinCustom.css' | asset_url | stylesheet_tag }} 
    {{ 'jquery-1.4.2.min.js' | asset_url | script_tag }} 
    {{ 'jquery.jcarousel.min.js' | asset_url | script_tag }} 

    {% if template == 'index' %} 
    <title>{{ shop.name }}</title> 
    {% elsif template == '404' %} 
    <title>Page Not Found | {{ shop.name }}</title> 
    {% else %} 
    <title>{{ page_title }} | {{ shop.name }}</title> 
    {% endif %} 

    {% include 'fb-open-graph' %} 

    {% case settings.header_font %} 
    {% when "Rancho, cursive" %} 
    <link href='http://fonts.googleapis.com/css?family=Rancho' rel='stylesheet' type='text/css'> 
    {% when "'Amatic SC', cursive" %} 
    <link href='http://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'> 
    {% when "'Sancreek', cursive" %} 
    <link href='http://fonts.googleapis.com/css?family=Sancreek' rel='stylesheet' type='text/css'> 
    {% when "'Ubuntu Condensed', sans-serif" %} 
    <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'> 
    {% endcase %} 

    {{ 'style.css' | asset_url | stylesheet_tag }}{% if template contains 'product' and settings.main_image_display == 'Lightbox' %} 
    {{ 'jquery.fancybox-1.3.4.css' | asset_url | stylesheet_tag }}{% endif %} 
    {{ 'modernizr.js' | asset_url | script_tag }} 
    {{ 'option_selection.js' | shopify_asset_url | script_tag }} 

    {% if template contains 'customers' %} 
    {{ "shopify_common.js" | shopify_asset_url | script_tag }} 
    {{ "customer_area.js" | shopify_asset_url | script_tag }} 
    {% endif %} 

    <script type="text/javascript"> 

    $(document).ready(function() { 
     $('#mycarousel').jcarousel({ vertical: true, scroll: 1, start: 3 }); 
    }); 

    </script> 

    {{ '//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js' | script_tag }} 

    {{ content_for_header }}

페이지가 나는 다음 (I 여분의 물건이 질문에 관련되지를 편집)받을 렌더링합니다. 나는 jcarousel이 의존하는 js와 스타일 페이지의 참조를 가리키는 화살표를 놓았다. Shopify 프로젝트로 옮기기 전에 별도의 파일로 작업하는 예가있었습니다.

<head> 
    <meta charset="UTF-8"> 

    --> <link href="http://cdn.shopify.com/s/files/1/0212/5406/t/1/assets/skinCustom.css?241" rel="stylesheet" type="text/css" media="all" /> 
    --> <script src="http://cdn.shopify.com/s/files/1/0212/5406/t/1/assets/jquery-1.4.2.min.js?241" type="text/javascript"></script> 
    --> <script src="http://cdn.shopify.com/s/files/1/0212/5406/t/1/assets/jquery.jcarousel.min.js?241" type="text/javascript"></script> 


    <link href="http://cdn.shopify.com/s/files/1/0212/5406/t/1/assets/style.css?241" rel="stylesheet" type="text/css" media="all" /> 
    <script src="http://cdn.shopify.com/s/files/1/0212/5406/t/1/assets/modernizr.js?241" type="text/javascript"></script> 
    <script src="http://cdn.shopify.com/s/shopify/option_selection.js?aaf2a68ed9671e345bbc7eef1e63563c51bde6eb" type="text/javascript"></script> 



    <script type="text/javascript"> 

    $(document).ready(function() { 
    ERROR HERE --> $('#mycarousel').jcarousel({ vertical: true, scroll: 1, start: 3 }); 
    }); 

    </script> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script> 


<link rel="stylesheet" href="/global/theme-controls.css" type="text/css" /> 


</head>

내가 상상할 수있는 유일한 점은 다른 스크립트 파일 중 하나가이 문제를 망각하고 있다는 것입니다. 그러나 나는 다른 스크립트 파일을 꺼내는 것 외에 어떻게 디버깅 할 것인지는 잘 모른다. 누구나 비슷한 문제가 있거나 이에 대한 통찰력이 있다면 크게 감사하겠습니다. 다른 질문은 잘못된 구현 (머리에 스크립트를 두는 것) 이외의 대답을 얻지 못했습니다. 나는 무언가를하고 있을지도 모르지만, 나는 수없이이 시간을 조사하고 보았으며 그것이 무엇인지를 볼 수 없다.

감사합니다, @ gaoshan88로

앨런

출처

2013-02-13 Alan DeLonga

jquery를 두 번로드하는 이유는 무엇입니까? 한 가지 가능한 문제는 jQuery에서 사용되는 달러 기호입니다. jQuery ('# mycarousel')'을 사용하거나 jquery의 noconflict 모드를 사용하도록'jQuery'로 바꾸어보십시오. http://api.jquery.com/jQuery.noConflict/ – Stuart

나는 여러 번 그걸 보았다. 나는 두 번째 눈 쌍이 필요하다고 생각한다. 문제는 jquery를 두 번로드하면 문제가 발생한다는 것입니다. 처음에 jcarousel을 사용하려고했을 때 jcery가 종속되어있는 jquery를 찾을 수 없다고 말했기 때문에이 작업을 수행했습니다. 그래서 저는 그것을 이미 추가하지 않았다고 가정하고 직접 추가했습니다. 응답 해 주셔서 감사합니다. 나는 이것을 몇 시간 동안 알아 내려고 노력해왔다. –

모든 주문이 정확하고 충돌이없는 경우 어떻게됩니까? 여전히 인식되지 않습니다 (로드 된 콘솔에서 볼 수 있습니다.) –

응답 양식에 위에서 의견을 말하고 있습니다.

두 가지 문제가 있습니다. 먼저, jQuery를 두 번로드하고있다. 그러지 마. 둘째, jQuery의 $ 사용은 다른 자바 스크립트 라이브러리와 충돌 할 수 있으므로 jQuery을 사용하거나 jQuery를 사용해야합니다. noconflict mode.

출처

2013-02-13 03:30:00 Stuart

내가 두 번 jQuery를로드하는 댓글을 달았습니다. 왜냐하면 처음에는 jcarousel.js 스크립트를 추가했을 때 jquery 파일이 없다고했기 때문입니다. 그래서 나는 shopify가 google.apis를 통해 최신 버전을 추가한다는 것을 모른 채 자신을 다시 추가했습니다. 왜 그것이 jquery로 첫 번째 장소에서 오류를 주 었는지 잘 모르겠지만, google.apis 스크립트 referene을 사용하면 효과가있었습니다. 고맙습니다. 감사합니다.

출처

2013-02-13 02:05:55

스크립트를로드 할 때 순서가 중요하므로 다른 스크립트에 대한 종속성에 따라 순서를 지정하십시오 .jcarousel.js 파일은 jquery.js 뒤에 추가해야합니다 왜냐하면 jcarousel은 jquery에 의존하기 때문에 시각적으로는 분명해진다. $(). jcarousel' – danronmoon

문제가 있었음에 틀림 없다. 처음 시도했을 때 jcarousel을 마지막 스크립트로로드 한 것 같았지만 google이라고 생각한다. jquery에 대한 apis one이 그 아래에있었습니다. –

Shopify, TypeError : $ (...). jcarousel은 함수가 아닙니다.

답변

관련 문제