2016-04-19 19 views
0

Das Klickereignis in diesem Code möchte nicht ausgelöst werden, wenn ich auf einen beliebigen li-Eintrag klicke, warum ist das?Warum Klick-Ereignis nicht ausgelöst wird?

<!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 unter Ordner js befindet:

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

Ich habe versucht, den Code in jsfiddle und es auch funktionieren, wenn ich das Skript innerhalb der Seite funktioniert index.html schreiben, aber wenn ich versuche, mit js/myscript.js zu verlinken funktioniert es nicht !!

Antwort

1

Sie benötigen Skript ausgeführt werden soll, wenn das Dokument bereit ist, oder Sie können Ihr Skript am Ende, direkt vor dem Tag Schließen des html Körper bewegen (dh: </body>)

Eine weitere Möglichkeit ist die Verwendung Ereignis Delegation, an document (was immer existiert):

$(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>

Verwandte Themen