2016-04-19 13 views
0

このコードのclickイベントは、liアイテムをクリックしたときにトリガーしたくないのですが、それはなぜですか?クリックイベントがなぜトリガーされないのですか?

<!DOCTYPE HTML> 
<html> 
<head> 
    <!-- begin CSS --> 
    <!--<link href="css/style.css" type="text/css" rel="stylesheet"> 
    <link href="css/html5-reset.css" type="text/css" rel="stylesheet">--> 
    <!-- end CSS --> 

    <!-- begin JS --> 
    <script src="js/jquery-2.2.3.min.js" type="text/javascript"></script> 
    <!--<script src="js/modernizr-2.0.6.min.js" type="text/javascript"></script>--> 
    <script src="js/myscript.js" type="text/javascript"></script> 
    <!-- end JS --> 

    <title>Navigation Menu</title> 
</head> 

<body style="background: url(images/bgnoise_lg.png) repeat left top;"> 
<!-- begin container --> 
<div id="container" style="width: 600px; margin: 280px auto 0;"> 

    <!-- begin navigation --> 
    <nav id="navigation"> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">Portfolio</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Blog</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </nav> 
    <!-- end navigation --> 

</div> 
<!-- end container --> 

</body> 
</html> 

myscript.jsは、フォルダJSの下に位置しています:

$('#navigation li a').click(function() { 
    alert($(this).text()); 
}); 

私はjsfiddleのコードを試してみましたが、私はそれが動作するindex.htmlページ内のスクリプトを書くときにも動作しますが、私がしようとすると、 js/myscript.jsにリンクすると動作しません!

答えて

1

あなたは、ドキュメントの準備ができているか、あなたはすぐにタグをHTMLボディ(すなわち:</body>)を閉鎖する前に、最後にスクリプトを移動させることができるときにスクリプトを実行する必要が

別の可能性は、イベントの委任を使用することです(常に存在する)documentに取り付けられた:

$(document).on('click', '#navigation li a', function(e) { 
     alert($(this).text()); 
    }); 

$(function() { // document ready 
 
    $('#navigation li a').click(function() { 
 
    alert($(this).text()); 
 
    }); 
 
});
<script src="https://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script> 
 

 
<body style="background: url(images/bgnoise_lg.png) repeat left top;"> 
 
<div id="container" style="width: 600px; margin: 280px auto 0;"> 
 

 
    <!-- begin navigation --> 
 
    <nav id="navigation"> 
 
     <ul> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">Services</a></li> 
 
      <li><a href="#">Portfolio</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Blog</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </nav> 
 
    <!-- end navigation --> 
 

 
</div>

関連する問題