2017-02-22 8 views
1

私は現在、このなぜjs関数はhtmlファイルの中にある必要があり、この場合には分離することはできませんか?

ファイル名のようなものがあります。今

{% load staticfiles %} 



<script src="{% static "bootstrap/js/Notes.js"%}"></script> 


<div class="pure-container" data-effect="pure-effect-slide" style="height: 10px"> 
      <label class="pure-toggle-label" for="pure-toggle-left" data-toggle-label="left" style="margin-top:50px"> 
       <span class="pure-toggle-icon"></span> 
      </label> 

</div> 

notes.htmlをI持っている(このファイルはNotes.htmlファイルで参照されている。)

このようなものです Notes.jsと呼ばれるファイル

ファイル名:

$(".pure-toggle-label").click(function() { 
    console.log("Hello World"); 
}) 

Notes.js今すぐ上記のコードから私はpure-toggle-labelをクリックすると、Iコンソールが「Hello World」を取得することを期待してください。しかし、クリック機能は決して呼び出されないようです。今度はNotes.jsの内容をNotes.htmlにタグ<script> </script>で囲んで移動すると、関数が呼び出されます。私の質問は、なぜこれが起こっているのですか?

1 - :私は別に機能が

+0

jqueryライブラリを追加する前にjsファイル。私は何も見ませんでした。ブラウザのコンソールでエラーをチェックしてください –

+0

DOMが存在する、またはロードされる前に 'click'イベントリスナーを付けているようです。 '

0

JSコード(とjQuery、あなたのケースで)とすぐにJSが通訳を見つけるように実行されますjs libがロードされる前に実行されるコードが呼び出されると、 "...見つからないエラー"が発生します...一方、ほとんどの初期化関数はonloadに固定されていますこれは、ほとんどのjquery関数が操作前に適切にロードされなければならないdom要素と関連しているからです。

関連する問題