JQuery keyup事件多次触发问题排查求助

核心原因：重复绑定事件 #

你的回调函数每次执行四次，大概率是因为getProducts()函数被调用了多次，导致同一个.search-products输入框被重复绑定了四次keyup事件，每次按键触发时，四个绑定的事件都会执行，所以回调（包括AJAX请求）会重复四次。

常见触发场景 #

• getProducts()被多次调用：比如在页面加载时调用了多次，或者在某个循环、异步回调（如AJAX成功回调）里重复执行了这个函数。
• 页面存在多个相同class的输入框：如果页面里有多个.search-products的input元素，每个元素都会绑定事件，按键时所有匹配的元素都会触发回调。（你的HTML里只有一个输入框，这个可能性较低）

解决方案 #

1. 绑定事件前先解绑旧事件 #

修改代码，在绑定keyup事件前，先移除该元素上已有的keyup事件绑定，确保每次只绑定一次：

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

2. 确保getProducts()只执行一次 #

检查你的代码逻辑，确保getProducts()函数在页面生命周期内只被调用一次，比如放在$(document).ready()里，避免重复执行：

$(document).ready(function(){
    // 只调用一次getProducts
    getProducts();
});

3. 改用事件委托（适合动态生成的输入框） #

如果输入框是动态生成的（比如通过AJAX加载到页面），建议将事件绑定到父元素（或document），这样即使元素重新生成，也只会绑定一次事件，不会重复：

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

额外优化：防抖处理 #

输入框每次按键都触发AJAX会造成不必要的请求，建议添加防抖函数，避免频繁请求：

getProducts(){
    let debounceTimer;
    $('.search-products').off('keyup').on('keyup', function(){
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => {
            const searchProducts = new SearchProducts(); 
        
            let search = $.trim($(this).val());
            if(search!=""){
                let url = '/search-for-products/' + search;
               
                $.ajax({
                    type: "GET",
                    url: url,
                    data: {},
                    success: function(response){
                        if(response.success){
                            searchProducts.showSearchProducts(response.products);
                        }
                    }
                });
            }
        }, 300); // 300ms内没有新按键才执行请求
    });
}

内容的提问来源于stack exchange，提问作者Mudiaga