Почему jQuery не работает при включении в отдельный файл

Я начинаю изучать jQuery и веб-разработку, так что это может быть глупый вопрос, но я не могу найти ответ на это в Google (возможно, я не поиск подходящих ключевых слов). У меня есть простой HTML-файл (скажем, «test.html», который загружает jQuery, внешний файл javascript (скажем, «test.js»), который я написал, и на нем есть кнопка. Например,Почему jQuery не работает при включении в отдельный файл

<html> 
.... 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script src="scripts/test.js" type="text/javascript"></script> 
.... 
<body> 
<button type="button" class="button" id="my_button">test</button> 
</body> 
</html>

в «test.js», у меня есть:.

$("#my_button").click(function() { 
    alert('test'); 
    return false; 
});

Но когда я нажимаю на кнопку, она не работает, однако, когда я ставлю то, что в «test.js» в «test.html 'следующим образом:

<html> 
.... 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $("#my_button").click(function() { 
     alert('test'); 
     return false; 
    }); 
}); 
</script> 
.... 
<body> 
<button type="button" class="button" id="my_button">test</button> 
</body> 
</html>

Это работает. Первый вопрос: может кто-нибудь объяснить мне, почему я t будет работать, когда я вставляю код во внешний файл и загружаю его? Всегда ли нужно обернуть код jQuery с помощью $(function() {......}, чтобы он работал?

В идеале, я не хочу использовать javascript-код в своем HTML-шаблоне, потому что это явно грязно. Связанный/второй вопрос: какой самый чистый/лучший способ отделить код javascript/jQuery, как указано выше, и все же заставить его работать в предназначенном HTML-шаблоне?

Благодарим вас за ответ.

источник

2013-07-11 user1330974

$ (function() {}) == $ (document) .ready() как в элементах dom, были загружены, и безопасно подключать к нему слушателей. –

* «Каков самый чистый/лучший способ разделить код javascript/jQuery, как показано выше, и все же заставить его работать в предназначенном шаблоне HTML?» * Переместите скрипты прямо перед тегом закрывающего тега. –

Да, вы сделали бы это в любом файле, с которым вы напрямую связываетесь

$(document).ready(function() { 

    $("#my_button").click(function() { 
     alert('test'); 
     return false; 
    }); 

});

источник

2013-07-11 18:01:40 simongus

Спасибо. $ (document) .ready (....) гораздо читабельнее (легко понять), чем просто $ (function() {..... – user1330974

Событие, связанное с jquery, требует, чтобы объект HTML уже был обработан.

Если вы говорите, что $('#button').click(function(){dosomething()}); Вам нужно #button уже существуют на HTML-странице для работы.

Когда вы используете $(function(){}); Код ожидает документа, готового к событию, для выполнения кода. Итак, если вы вызываете button.click в неподходящее время, он не найдет кнопку и не будет работать.

источник

2013-07-11 18:02:18 Guerra

Спасибо. Я читаю все комментарии и изучаю разные способы объяснений (но ответ один и тот же). :) – user1330974

Переместите ваш script тег test.js чуть выше закрытия body бирка (или после button бирка). Если вы вызываете свой скрипт перед своей кнопкой, он не может найти кнопку с именем id. Если вы положите его после кнопки, это будет работать.

источник

2015-07-09 16:18:16

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