单击时调用更改事件答案

【问题标题】：Change event being called on click单击时调用更改事件
【发布时间】：2021-06-26 11:15:16
【问题描述】：

我正在制作一个 chrome 扩展，并且弹出窗口有一个输入元素，我以编程方式为其分配一个 on-change 事件侦听器。

$(".search").change(function() {
    console.log($(this).val());
});

这里是html

<div class="title">extension</div>
    <div class="animated-page-container">
        <div class="stats">
            <h1></h1>
        </div>
        <div class="website">
            <div class="search-container">
                <div class="search-box">
                    <div class="container">
                        <div class="search-icon"></div>
                    </div>
                    <input class="search" id="search" />
                    <div class="icon-container">
                        <div class="add"></div>
                        <h1 class="tooltip">Add to list</h1>
                    </div>
                </div>
            </div>

            <div class="website-list-container">
                <div class="website-list"></div>
            </div>
        </div>
    </div>

我有一个带有类搜索图标的搜索图标，它旁边没有附加任何事件侦听器。

当输入值改变时，onchange 事件永远不会被触发。相反，当我单击搜索图标时，它会触发 onchange 事件。 Chrome 开发工具甚至没有显示附加到搜索图标的任何侦听器。我尝试用 id 替换 search 类并为其附加监听器，但无论如何行为保持不变。

【问题讨论】：

请显示 HTML
@JaromandaX 添加了 html

标签： javascript google-chrome-extension

【解决方案1】：

onchange 事件总是在元素失去焦点时触发，在内容改变之后。如果您正在寻找在每次输入后立即触发的事件，请尝试这样的 oninput 事件：

$(".search").on("input", function() {
    console.log($(this).val());
});

【讨论】：