У меня есть приложение, использующее jquery 3.2.1
Одна из страниц содержит 2 <form> элемента с одинаковым именем класса, .products-ctp__search-form. HTML-код для этого отображается при загрузке страницы:
<form class="products-ctp__search-form">
<input name="n1" type="text">
</form>
<form class="products-ctp__search-form">
<input name="n2" type="text">
</form>
Я хочу настроить таргетинг на элементы <input> в каждой форме и использовать обработчик событий для работы с пользователем, вводящим ввод в любой из них. Итак, я написал это в файле foo.js, а затем связал его внизу страницы:
<!-- Form markup above is here -->
<script src="foo.js"></script>
Файл foo.js содержит:
$(function() {
$('.products-ctp__search-form input[type="text"]').bind("keyup change input",
function (e) {
console.log('debug');
console.log(e);
});
});
Когда явводите текст в любой ввод, он ничего не записывает в консоль.
Но если я вставлю приведенный выше скрипт в свою консоль, он будет, например,
debug
VM726:4 r.Event {originalEvent: InputEvent, type: "input", target: input#n1.form-control.form-control.input-border-secondary, currentTarget: input#n1.form-control.form-control.input-border-secondary, isDefaultPrevented: ƒ, …}
Странно, если я избавлюсьиз 1 ввода (например, удалив форму, содержащую n2 и сохранив n1), он работает нормально. Другие страницы в приложении имеют только 1 вход, и эквивалентный код - при включении из связанного файла .js - работает нормально.
Итак, я прочитал jquery работает в консоли, но не в связанныхjs файл , но это, похоже, предполагает ожидание загрузки чего-либо. В этом случае разметка отображается при загрузке страницы (не через ajax и т. Д.), А код jquery находится внутри document.ready.
Существует еще один пост jQuery работает в консоли, но не в файле .js. , который я прочитал, но опять-таки, похоже, приходится ждать, пока что-то загрузится. Если это так, тогда что я должен ждать и как это связать?
Связанные посты имеют смысл, когда вы ожидаете загрузки чего-то вроде изображения. Но как это работает, если это просто разметка страницы? Или это на самом деле не проблема?
jquery включен в <head> документа, тогда как файл foo.js находится внутри <body>. Поэтому я не верю, что проблема заключается в том, что foo.js было включено до jquery и т. Д.