2011-06-17 25 views
0

クラスによって識別されたメニューリストボタンのクリックイベントを登録しようとしていますが、発砲していないようです。次のように私のコードは次のとおりです。jQuery .clickイベントがクラスに登録されていません

<body> 
<!-- jQuery Simple Drop-Down Menu http://javascript-array.com/scripts/jquery_simple_drop_down_menu/# --> 
     <div id="dropDownDiv" style="width: 908px; height: 24px; margin: auto auto; background: #324143;"> 
      <ul id="jsddm"> 
       <li><a href="#">Item 1</a> 
        <ul> 
         <li><a class="btn myOtherClass" href="#">Button 1</a></li> 
         <li><a class="btn myOtherClass"href="#">Button 2</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Item 2</a> 
        <ul> 
         <li><a class="btn myOtherClass" href="#">Button 3</a></li> 
         <li><a class="btn myOtherClass" href="#">Button 4</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 

</body> 

をそして、私のスクリプトで私は、次があります。

/* Register the click event for menu buttons */ 
$('.btn').click(function() { 
    alert("You clicked a button"); 
    }); 

アラートが決して火災と私は任意のヘルプは高く評価され、なぜ、わかりません。

UPDATE:それは私のプロジェクトで働いていない理由を

リンク内のコードがわからない、に私のために動作します。私はJavaリソースを有効にしたEclipse PHPプロジェクト環境にいます。私はChromeとFirefoxで自分のプロジェクトを試してみました。私はスクリプトの残りの部分をチェックします。

UPDATE 2:

.ready関数内で包む程度Shefの勧告は、トリックをしたように見えます。私はまだそれが必要な理由を理解していない、 "c =笑顔"のリンクはそれなしで働いた。

+1

スクリプトはいつ実行されますか?あなたはイベントをフックアップしようとする時までにDOMを準備していますか? –

+0

メニュー項目はHTMLテンプレートの一部ですか、あるいは動的に生成されていますか? –

+0

これを試してみてください:http://jsfiddle.net/pEftj/ –

答えて

4

私のためにうまく動作します。check it out多分あなたはjQueryを含まなかったでしょうか?それとも、あなたはこのような準備ができてドキュメント内のイベントリスナバインドコードをラップされていません。

$(document).ready(function(){ 
    $('.btn').click(function() { 
     alert("You clicked a button"); 
    }); 
}); 
+0

Thanksシェフが.ready関数をラップしました。なぜそれが必要なのか分かりません。なぜjQueryのドキュメンテーションではその例でそれを指定していないのですか? .ready関数でラップせずに上記の "c-smile"のリンクがうまくいくのはどうですか? – kingrichard2005

+0

DOM要素にアクセスして操作しているときは、常に準備完了イベントが発生するのを待つ必要があります。 [これは文書化されています。](http://api.jquery.com/ready/)、気付かずにそのまま渡すこともあります。 :)上の例は、DOMが既にそこにロードされているので動作します。そこで問題はありません。 DOM要素がロードされている可能性があり、ロードされていない可能性があります。 DOM要素がロードされているかどうかを知る最善の方法は、 'ready'イベントが発生するのを待つことです。なぜなら、すべてを置く理由は... – Shef

+0

...' ready() '関数内でコードを実行しますいったんDOM要素が読み込まれると、その内部に配置されます。 :) – Shef

0

は、あなたがのstopPropagationを使用するか起こってからクリックイベントを妨げている可能性が別のクリックイベントではfalseを返していますか?

jQueryを読み込んだ後にjQueryを使用していますか?

バインド時にDOM内にありますか? (クリックしないとデリゲートを使用するか、ロード後にバインドする)

関連する問題