我有一个使用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 works in console, but not in linked js file，但这似乎建议等待加载。在这种情况下，标记是在页面加载时呈现的（不是通过ajax等），并且jquery代码在document.ready内部。
[我读了另一篇文章jQuery works in console but not in .js file，但似乎又暗示必须等待加载一些内容。如果是这种情况，那么what我应该等待以及如何绑定它吗？
当您等待图像之类的内容时，链接的帖子才有意义。但是，如果仅是页面标记，这将如何工作？还是这实际上不是问题所在？
jquery包含在文档的<head>中，而foo.js文件位于<body>内部。因此，我不认为这是foo.js在jquery等之前包含在内的问题。
看起来您的输入元素正在动态地加载，您需要为其更改脚本，如下所示：>
$(function() {
$(document).on("keyup change input", '.products-ctp__search-form input[type="text"]',
function (e) {
console.log('debug');
console.log(e);
});
});