jquery-事件处理程序,如果粘贴到控制台中则有效,但通过.js文件包含时不起作用

问题描述 投票:0回答:1

我有一个使用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等之前包含在内的问题。

javascript jquery html
1个回答
0
投票

看起来您的输入元素正在动态地加载,您需要为其更改脚本,如下所示:>

$(function() {
    $(document).on("keyup change input", '.products-ctp__search-form input[type="text"]', 
    function (e) {
        console.log('debug');
        console.log(e);
    });
});
热门问题
推荐问题
最新问题