单击时调用的更改事件

Question

我正在做一个 chrome 扩展，弹出窗口有一个输入元素，我以编程方式为其分配了一个更改事件侦听器。

$(".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>

我有一个搜索图标，旁边有 class 搜索图标，但没有附加任何事件侦听器。

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

Answer 1

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

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

单击时调用的更改事件

Change event being called on click

javascript

google-chrome-extension