Jquery keyup 事件多次触发答案

【问题标题】：Jquery keyup event firing more than onceJquery keyup 事件多次触发
【发布时间】：2022-10-14 16:53:06
【问题描述】：

每次用户在输入框中键入值时，我都试图在 div 中显示我的数据库中的一些内容。我正在使用 jquery 来执行此操作。但是每当我输入一些东西时，一旦进入输入框......回调函数就会重复四次。

这是我的jQuery代码：

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);
                        }
                    }
                });
            }
        });
    }

这是 html 输入标签：

<input type="text" class="form-control search-products" placeholder="What are you searching for ?" aria-label="Username" aria-describedby="basic-addon1" style="color: lightgrey;">

我希望您对我的代码可能出现的问题发表诚实的看法。因为，我现在很困惑该怎么办。

【问题讨论】：

搜索getProducts()方法被调用了多少次，如果不止一次，那么新的事件处理程序将绑定到该事件的次数。
这回答了你的问题了吗？ How to check whether dynamically attached event listener exists or not?
将getProducts(){ ... 更改为getProducts() { console.log("getproducts")... 加载您的页面并查看“getproducts”出现在浏览器控制台中的次数，注意它可能显示为(4) getproducts - 所以请留意这个数字 - 这是它出现的次数重复而不更改 - chrome 将它们组合成一行，因此您的浏览器日志不会被垃圾邮件

标签： javascript jquery onkeyup

【解决方案1】：

如果您没有找到它被添加两次的原因，一个简单的解决方法是，您可以在再次添加之前删除侦听器：

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

您还可以使用命名空间事件，以不删除其他 keyup 事件：

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

没有多少人知道 jQuery 支持命名空间事件。

【讨论】：