キャッチされていないjQueryエラーを回避する方法

Question

WordPressテーマでOwl Carouselを使用していて、現在jQueryをページ内に適用していますが、その関数を呼び出すまでjQueryがロードされていない可能性があります。そのエラーを避けるために？私は文書を使用しています。準備ができている機能も.....私はヘッダだけでなく、私のフッタにもjQueryをロードしたいと思っています。ここ は、私はjQueryのフッターにロードされている間これは、私のページ内にある

$(document).ready(function() { 
    $('#portfolio-slider').owlCarousel({ 
    loop: true, 
    margin: 10, 
    nav: true, 
    items: 3, 
    responsive: { 
     0: { 
     items: 2 
     }, 
     600: { 
     items: 3 
     }, 
     1000: { 
     items: 3 
     } 
    } 
    }) 
}); 

を使用しています....

Answer 1

ミスを避けるために、すべての最初の、とあなたのコードをラップコードです：

(function($){ 
    // your code goes here 
})(jQuery); 

これは作ると確信しているあなたはENQ secodnly $ === jQuery

、 Wordpressの中にスクリプトをueue、依存関係としてのjQueryを追加します。

wp_enqueue_script ('YourScript', 'your-script.js', array('jQuery')) 

をあなたは上記のようにそれを行うことができない場合は、別のアプローチがDOMContentLoadeddocument.readyはまったく同じものですハンドラ、しかし、jQueryのなしを使用することです - それは発射したとき、あなたは利用可能jQueryている必要があります

document.addEventListener('DOMContentLoaded', function() { 
    $('#portfolio-slider').owlCarousel({ 
    loop: true, 
    margin: 10, 
    nav: true, 
    items: 3, 
    responsive: { 
     0: { 
     items: 2 
     }, 
     600: { 
     items: 3 
     }, 
     1000: { 
     items: 3 
     } 
    } 
    }) 
}); 

Answer 2

をこれはあなたのコードを呼び出す前にjQueryをロードしていることを確認しておくための一つの方法である： -

function jQueryLoaded() { 
    $(document).ready(function() { 
    $('#portfolio-slider').owlCarousel({ 
     loop: true, 
     margin: 10, 
     nav: true, 
     items: 3, 
     responsive: { 
     0: { 
      items: 2 
     }, 
     600: { 
      items: 3 
     }, 
     1000: { 
      items: 3 
     } 
     } 
    }) 
    }); 
} 

function checkForjQuery() { 

    window.jQuery ? jQueryLoaded() : setTimeout(checkForjQuery); 

} 

checkForjQuery(); 

DOMがロードされたときに0

Answer 3

それは

$(document).ready()をなぜ起こるかは、その内のコードを実行しますが、jQueryライブラリがロードされる前に、その機能に呼び出しているので、ブラウザは何$(document).ready()手段を知りません。

回避策

あなたは、いくつかの方法でそれを処理することができます。 jQueryライブラリをロードする行の後にコードを移動することができます。コードを別のjsファイルに追加してjQueryライブラリの後にロードすることもできます（推奨）...または、vanilla jsを使用して、 ：

document.addEventListener("DOMContentLoaded", function() { 
    $('#portfolio-slider').owlCarousel({ 
     loop: true, 
     margin: 10, 
     nav: true, 
     items: 3, 
     responsive: { 
      0: { 
       items: 2 
      }, 
      600: { 
       items: 3 
      }, 
      1000: { 
       items: 3 
      } 
     } 
    }); 
}); 

最後の回避策については、https://stackoverflow.com/a/21814964/3648578を確認してください。