Я начинаю изучать 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-шаблоне?
Спасибо за ваш ответ.
Для работы функции click вам нужно иметь $(function() {...}). Он сообщает jquery, что документ загружен, и он может начать работу с DOM. До этого DOM не готов, и ваш элемент может не существовать.
РЕДАКТИРОВАТЬ: Используйте это для внешних файлов, если только вы не являетесь более продвинутыми и знаете, когда НЕ использовать его.
$(document).ready(function() {
$( "#my_button" ).click(function() {
alert('test');
return false;
});
});
Связывание событий в jquery требует, чтобы HTML-объект уже был обработан.
Если вы скажете $('#button').click(function(){dosomething()});
Вам нужно #button уже существовать в HTML для работы.
Когда вы используете $(function(){});
Код ожидает документа, готового для выполнения кода.
Итак, если вы вызываете button.click в неправильное время, он не найдет кнопку и не будет работать.
Переместите тэг script тега test.js чуть выше закрывающего тега body (или после тега button). Если вы вызываете ваш script перед своей кнопкой, то он не может найти кнопку с именем id. Если вы положите его после кнопки, то он будет работать.