2011-07-28 9 views
2

私はJqueryで新しいです。私は自分のコードに問題がある、私は非常にどのような正しいクリックイベントのjqueryコードを記述するのは混乱している。ありがとうございました!Jqueryのクリックイベントの作成方法正しい方法は?

最初の方法:

<script type="text/javascript"> 

$('a').click(function(){ 
    alert('you clicked a tag !!! '); 
}); 

</script> 

及び第二の方法:

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $('a').click(function(){ 
       alert('you clicked a tag !!! '); 
      }); 
     }); 

</script> 

私はテストのための2方法を書くとき、ちょうど二番目が成功すると、警告を表示するが、最初のものは何もしません。さらに、私はhttp://api.jquery.com/click/についてレビューします。最初のものはサンプルを書く方法ですが、正常に実行され、混乱させてしまいます。

<script> 
    $("p").click(function() { 
     $(this).slideUp(); 
    }); 
    $("p").hover(function() { 
     $(this).addClass("hilite"); 
    }, function() { 
     $(this).removeClass("hilite"); 
    }); 
</script> 

答えて

6

最初のスクリプトが成功しないのは、まだa要素がロードされていないからです(スクリプトがあなたのページのヘッダーに置かれている場合)。

$(document).ready(..)を使用すると、DOMを操作できる状態になるとコードが実行され、jQueryがa要素にクリックイベントを添付できるようになります。

一般に、$(document).readyイベントが発生する前に、DOM操作コードの実行を開始して、必要なものがすべて利用可能であることを確認してください。

2

最初の方法は、ブラウザがHTMLのその部分に到達するとすぐにコードを実行します。

第2の方法は、ドキュメントが準備できるまで待ってからコードを適用することです。

何が起きているかは、最初の方法で記述されたコードが実行されたときにDOMが完全に読み込まれないということです。つまり、コードを適用する要素は、<a>ではない可能性があります。そのため、第2の方法を使用することが好ましい(DOMが準備完了したときに実行されるように)。

0

最初の例では、ドキュメントが準備ができていないときにクリックイベントをリンクにバインドしようとしています。 DOM関連の操作を行う必要がある場合は、2番目のオプションを使用する必要があります。

0

最初の方法では、要素をJavaScriptの前に最初に宣言する必要があります。 しかし、2番目の方法では、ドキュメントの準備が整ったとき、つまり読み込みが完了したときにjavascriptが実行されるため、問題はありません。

1

イベントをバインドする前に、すべてのリソースがロードされ、DOMが処理されたことを確認するために、すべてのjqueryを$(document).ready()に囲む必要があります。

$(document).ready()を除いてHTMLページの一番下にスクリプトタグを置くと、jQueryはすべてのHTMLとJavaScriptがロードされ、DOMが処理されるため動作しそうです。

ベストプラクティスは、すべてのjqueryを$(ドキュメント).ready()に囲むことです。

関連する問題