Почему jQuery click не работает, когда включен в отдельный файл
Я новичок в изучении jQuery и веб-разработки, так что это может быть глупый вопрос, но я не могу найти ответ на этот вопрос в Google (возможно, я не ищу правильные ключевые слова). У меня есть простой HTML-файл (скажем, «test.html», который загружает jQuery), внешний файл javascript (скажем, «test.js»), который я написал, и в нем есть кнопка. Например,
<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>
Оно работает. Первый вопрос: может ли кто-нибудь объяснить мне, почему это будет работать, когда я вставляю код во внешний файл и загружаю его? Это всегда необходимо, чтобы обернуть код JQuery с$(function() {......} чтобы это работало?
В идеале я не хочу, чтобы в моем HTML-шаблоне был JavaScript-код, потому что он явно грязный. С этим связан второй вопрос: каков самый чистый / лучший способ отделить код javascript / jQuery, как описано выше, и при этом заставить его работать в заданном HTML-шаблоне?
Спасибо за ваш ответ.