jQuery работает в jsfiddle, но не в html-файле?

Я проверил много раз, но я понятия не имею, почему jQuery не будет работать. Он работает в jsfiddle!jQuery работает в jsfiddle, но не в html-файле?

HTML:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Josue Espinosa</title> 
<link href="style.css" rel="stylesheet" type="text/css"> 
<script src="animate.js"></script> 
<script src="http://code.jquery.com/jquery-latest.min.js" 
     type="text/javascript"></script> 
</head> 
<body> 
<div id="menu"> 

</div> 
</body> 
</html>

CSS:

#menu{ 
    width:15px; 
    height:200px; 
    background:red; 
}

JQuery:

$('#menu').hover(function(){ 
    $("#menu").stop().animate({width : "300px"}); 
});

источник

2013-02-27 Josue Espinosa

Вы можете указать содержимое, которое у вас есть в файле HTML? – BenR

Поскольку другие ответы не похожи на работу для вас, я собираюсь взять удар по предложению.

Я предполагаю, что вы инициализируете свой JavaScript в том месте, где элемент, добавляющий прослушиватель событий, пока недоступен. Вот решение этой проблемы.

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Josue Espinosa</title> 
    <link href="style.css" rel="stylesheet" type="text/css"> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script src="animate.js"></script> 
</head> 
<body> 
    <div id="menu"> 
    </div> 
    <script type="text/javascript"> 
     $('#menu').hover(function() { 
      $("#menu").stop().animate({ width: "300px" }); 
     }); 
    </script> 
</body> 
</html>

В этом примере JavaScript сразу ниже элемента, который вы хотите добавить слушателя, поэтому он гарантированно будет доступен в DOM.

В качестве альтернативы вы можете обернуть JS вокруг события, которое должно быть выполнено после того, как документ будет готов. Вот пример:

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Josue Espinosa</title> 
    <link href="style.css" rel="stylesheet" type="text/css"> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script src="animate.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#menu').hover(function() { 
       $("#menu").stop().animate({ width: "300px" }); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div id="menu"> 
    </div> 
</body> 
</html>

Также важно отметить последовательность элементов JavaScript.

источник

2013-02-27 00:25:09 BenR

Вам нужно либо обернуть код JQuery в $(function() {}) или (предпочтительно) переместим код просто до </body>.

источник

2013-02-27 00:14:52

Похоже, что проблема лежит здесь:

<script src="animate.js"></script> 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Вашего animate.js идет перед Jquery нагрузки

источник

2013-02-27 00:16:33 apoq

Я изменил это, но он по-прежнему не работает:/ –

ОК, посмотрим на него, brb – apoq

он работает, когда я положил его внутренне прямо перед, но не тогда, когда он является внешним. –

jQuery работает в jsfiddle, но не в html-файле?

ответ

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