2012-01-31 21 views
0

私がここでばかげていると、私に虐待を叫ぶことは自由ですが、私は混乱しています。jQueryがロードされていませんか?

<head> 
<meta charset="utf-8"> 
<title>Website</title> 
<link href="style.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="js/functions.js"></script> 
</head> 

私はこのようなリンクのリストを持っている:

私は頭の中でこれを持って、私はトリプルファイルの場所をチェックしましたし、すべてがうまくている/:正常に動作する必要がありますすべてのもののように思えます

<ul class="menu"> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li><a href="#">Link 3</a></li> 
</ul> 

そしてfunctions.jsに私はこれを持っている...

console.log('WTF.. THIS LOGS IN THE CONSOLE!?!?!?!'); 

// debugging purposes 
alert($('a').attr('href')); 

$('.menu li a').click(function(e){ 
    alert('hey'); 
    e.preventDefault(); 
}); 

私は「国連を言ってアラートを取得私がリンクをクリックすると、デフォルトのアクションが防止され、私は警告を受け取りません。

結論jQueryのどこかに問題があったのですが、私はちょうどここ

+1

あなたは '$(ドキュメント).ready(関数(){/ *あなたのコード* /})で、あなたのjqueryの - 通話を囲まれている;'や '$(関数(){/ *あなたのコード*/}); '?? –

+0

どのブラウザをお使いですか?私はそのようなエラー(壊れたリンク、スクリプトのエラーなど...)を検出するためにfirebug(firefox用)のようなプラグインをお勧めします。 –

+0

私はそんなにばかです!私はこの基本的な何かを忘れた –

答えて

3

が起こっていただきました!あなたはおそらくdocument.readyハンドラ内で、あなたのコードをラップする必要が見つけることができません。

$(document).ready(function() { 
    console.log('WTF.. THIS LOGS IN THE CONSOLE!?!?!?!'); 

    // debugging purposes 
    alert($('a').attr('href')); 

    $('.menu li a').click(function(e){ 
     alert('hey'); 
     e.preventDefault(); 
    }); 
}); 

念頭JavaScriptでください、あなた、できるだけ早くそれがページに表示されて実行されますスクリプトが実行されてもまだ要素は存在しません。<a> 「準備完了」イベントを使用すると、コードが実行されているときにDOMが完全に使用可能になります。

</body>タグの前に、本文の末尾にあるfunctions.jsファイルへの参照を追加することもできます。

+0

慣例として、あなたが:readyを使うことを忘れる可能性があるなら、あなたのスクリプトをbodyタグの最後に置くべきです。 – danjah

+0

あなたは単に実際にこの方法でdocument.readyを取り除くことさえできます。 –

3

DOMがロードされていることを確認するために、$(document).ready()にすべてをラップしようとしましたか?

$(document).ready(function() { 
    console.log('WTF.. THIS LOGS IN THE CONSOLE!?!?!?!'); 

    // debugging purposes 
    alert($('a').attr('href')); 

    $('.menu li a').click(function(e){ 
     alert('hey'); 
     e.preventDefault(); 
    }); 
}); 

これはうまくいくはずです。 ($(document).ready(function() {});のショートカットは$(function() {});

+0

私はそんなにばかです!私はこの基本的なことを忘れていました...私は非常に頻繁にjQueryを使用しません –

1

あなたのスクリプト要素が頭に表示され、機能でそれを入れてdocument.readyを使用するなどのコード()の実行を遅らせるために何もしません。

あなたのリンクが本文に表示されていますこれを試している頭の後なので、コードが実行されるとき、彼らは存在しません。

4
$(function(){ 
    //....Your code of java script must be 
}); 

あなたが貼り付けられたコードは、あなたのfunctions.jsファイルの正確な内容であれば、それは...

+0

未フォーマットのコードは読めません。むしろいくつかの説明文を追加したいと思います。 –

2

を実行します次にあなたは問題があるでしょう。ドキュメントが準備される前にコードが実行されています。 functions.js内部関数の中で、あなたの初期化コードを入れて、文書の準備ができたとき、その関数を呼び出す:

$(document).ready(function() { 
    // now call your init function 
    myInitCode(); 
}); 
-3

は、あなたがクリックイベントでfalseを返すことを試みたがありますか?次のように?

$('.menu li a').click(function(e){ 
    alert('hey'); 
    e.preventDefault(); 
    return false; 
}); 
関連する問題