Jqueryのスクリプトの場所は重要ですか？

Question

JQueryを使用しているときにスクリプトタグの場所が重要かどうか教えてもらえますか？例えば

：

<script> 
$("a").click(function(event) { 
    event.preventDefault(); 
    $('<div/>') 
     .append('default ' + event.type + ' prevented') 
     .appendTo('#log'); 
}); 
</script> 

<a href="http://jquery.com">default click action is prevented</a> 
<div id="log"></div> 

、必要に応じて上記のコードは動作しませんが、次の作品、

<a href="http://jquery.com">default click action is prevented</a> 
<div id="log"></div> 
<script> 
$("a").click(function(event) { 
    event.preventDefault(); 
    $('<div/>') 
     .append('default ' + event.type + ' prevented') 
     .appendTo('#log'); 
}); 
</script> 

は二番目の仕事をしたのはなぜ？それはコードが上から下へ連続的に働いているからですか？また、最初のコードが.ready()の内側にある場合は、位置は関係ありません。

Answer 1

場所は関係ありません。最初のケースでは、document.readyハンドラにラップする必要があることを意味するDOM要素の前にスクリプトを配置しています。それ以外の場合、アンカーがまだ存在しない.clickハンドラを添付している瞬間です。 （文書の末尾にスクリプトを置く

<script> 
$(function() { 
    $("a").click(function(event) { 
     event.preventDefault(); 
     $('<div/>') 
      .append('default ' + event.type + ' prevented') 
      .appendTo('#log'); 
    }); 
}); 
</script> 

<a href="http://jquery.com">default click action is prevented</a> 
<div id="log"></div> 

：ここでは、.clickハンドラは、完全なDOMがロードされ、操作する準備ができたときにのみ添付されることを文書準備の意味にスクリプトを包むことができる方法です（実際にはBest Practices for Speeding Up Your Web Siteの推奨事項の1つです）、この場合はdocument.readyにラップする必要はありません。

Answer 2

スクリプトタグの内容は、ページの解析中にブラウザによって検出された時点で実行されます。あなたの最初の例では、コードはHTMLの前にあります。スクリプトが実行されると、<a>と<div>を含むHTMLはまだブラウザによって解析されていないので、aはまだ存在しないため、$('a')は失敗します。

<a>がすでにロード/解析され、ページのDOMに存在するため、2番目のバージョンが機能します。

.ready()関数を使用すると、実行するコードを登録することができますが、ページの完全DOMが使用可能になった後にのみ登録することができます。

$(document).ready(function() { 
    ... your code here ... 
}); 

Answer 3

最初のテストでは、要素が存在する前にコードが実行されています。次の2つのうちのいずれかを実行できます。

1）2番目の例のように行います。

2）（以下の代わりに、.clickを使用してください）

$("a").live('click',function(){ 
    // do stuff here 
}); 

これは、関数内で「もの」にすべてのアンカー（新旧）をバインドします。要素がまだDOMに追加されていないことは重要ではありません。

Answer 4

これを試してみると、DOMが準備完了するまで待つ必要があります。

$(function() { 
    $("a").click(function(event) { 
    event.preventDefault(); 
    $('<div/>') 
     .append('default ' + event.type + ' prevented') 
     .appendTo('#log'); 
}); 
}); 

Answer 5

jQueryの（「」タグに「クリック」イベントを結合、この場合には）に結合されていることを要素がすでにDOMにロードする必要があります。さもなければ、JSが実行されるとき、その "a"要素はまだ存在しません。

これには3つの可能な解決策があります。

ソリューション1
はあなたの第二の例のように、文書の末尾のjQueryを置きます。

溶液2
ラップ$（文書）でJSコード.ready（）関数、最後のオプションが使用する3
など

$(document).ready(function(){ 
    //the rest goes in here 
}); 

ソリューションjQueryの.live（）メソッドは、.live（）メソッドの前後に作成されたDOM要素にイベントをバインドします。例えば、場合（「」要素のロード前にJSを実行します）、あなたの最初のコードスニペットは、同様に機能するであろう

$('a').live('click',function(){ 
    //click event action 
}); 

に変更しました。しかし、この3番目のオプションは、.live（）が常に新しい要素が作成されたときに注意を払うことによって、ブラウザがより多くの作業を行うように強制するため、最も望ましいものではありません。前の2つのオプションのどちらかが間違いなく望ましいです。