CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
Mohammed raeesul irfan
Mohammed raeesul irfan

Reputation: 15

Change event being called on click

I am making a chrome extension and the popup has a single input element to which I'm programmatically assigning an on-change event listener.

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

Here is the 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>

I have a search icon with class search-icon next to it which has no event listeners attached to it.

The onchange event never gets fired when the input value changes. Instead when i click on the search icon it fires the onchange event. Chrome dev tools doesn't even show any listener being attached to the search icon. I have tried replacing the class of search with an id and attaching a listener to it, but in any case the behaviour remains the same.

Upvotes: 0

Views: 46

Answers (1)

Rowan M
Rowan M

Reputation: 103

The onchange event is always fired when the element loses focus, after the content has been changed. If you're looking for an event that fires immediately after each input, try the oninput event like so:

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

Upvotes: 1

Related Questions