Jquery keyup event firing more than once

Question

I'm trying to display some content from my database in a div, every time a user types a value into an input box. I'm using jquery to do this. But whenever I type something, once into the input box... the call-back function repeats, four times.

    getProducts(){
            $('.search-products').on('keyup', function(){
                const searchProducts = new SearchProducts(); 
            
                let search = $.trim($(this).val()); // get search text
                if(search!==""){
                    // let data = {search: search};
    
                    let url = '/search-for-products/' + search;
                   
                    $.ajax({
                        type: "GET",
                        url: url,
                        data: {},
                        success: function(response){
                            if(response.success){
                                searchProducts.showSearchProducts(response.products);
                            }
                        }
                    });
                }
            });
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control search-products" placeholder="What are you searching for ?" aria-label="Username" aria-describedby="basic-addon1" style="color: light grey;">

I'd like your honest opinions on what could be wrong, with my code. Cos, I'm now confused about what to do.

Search how many times `getProducts()` method is called, if it is more than once, then that many time new event handler will bound to that event. — Mujibur Rehman Ansari, Oct 14 '22 at 08:47
Does this answer your question? [How to check whether dynamically attached event listener exists or not?](https://stackoverflow.com/questions/11455515/how-to-check-whether-dynamically-attached-event-listener-exists-or-not) — Tom, Oct 14 '22 at 08:49
Change `getProducts(){ ...` to `getProducts() { console.log("getproducts")...` load your page and see how many times "getproducts" appears in the browser console, note that it may appears as `(4) getproducts` - so keep an eye out for that number - that's how many times it was repeated without changing - chrome combines them into a single line so your browser log doesn't get spammed — freedomn-m, Oct 14 '22 at 08:51
@freedomn-m I've tried your suggestion. The problem is with the "keyup" event that I'm calling and not the function getProducts(). But thanks, anyway. — Mudiaga, Oct 29 '22 at 14:41
So how many times was `getProducts` called? The issue you've described would occur when `getProducts()` is called multiple times - as that adds the `keyup` event each time. So run x4 you get x4 keyup. — freedomn-m, Oct 30 '22 at 09:48

score 4 · Accepted Answer · edited Oct 14 '22 at 09:00

4

If you've not found why it's added twice, a simple fix is you can remove the listener before adding it again:

$('.search-products').off('keyup').on('keyup', ...)

You can also use namespace events, to not remove other keyup events:

$('.search-products').off('keyup.search').on('keyup.search', ...)

Not many people know that jQuery supports namespace events.

edited Oct 14 '22 at 09:00

freedomn-m

27,664
8
35
57

answered Oct 14 '22 at 08:53

Aminadav Glickshtein

23,232
12
77
117

Jquery keyup event firing more than once

1 Answers1