2016-04-19 5 views
0

Событие click в этом коде не хочет запускаться, когда я нажимаю на любой элемент li, почему?Почему событие click не запускается?

<!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>

Смежные вопросы