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

Я начинаю изучать 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() {......}, чтобы он работал?

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

Спасибо за ваш ответ.

Ответ 1

Для работы функции click вам нужно иметь $(function() {...}). Он сообщает jquery, что документ загружен, и он может начать работу с DOM. До этого DOM не готов, и ваш элемент может не существовать.

РЕДАКТИРОВАТЬ: Используйте это для внешних файлов, если только вы не являетесь более продвинутыми и знаете, когда НЕ использовать его.

Ответ 2

$(document).ready(function() {

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

});

Ответ 3

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

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

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

Ответ 4

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