jQuery点击单个按钮触发3次回调事件是什么原因，如何解决？

数据老陈

2026-10-9

问题原因

最常见的情况是你的绑定代码被重复执行了3次：比如你把这段click绑定逻辑写在了.listing的遍历循环里、或者放在了会被多次调用的渲染函数、ajax请求回调中，每执行一次绑定逻辑，3个按钮就会各新增一次点击事件绑定，最终每个按钮都被绑定了3次回调，点击时就会连续触发3次。你看到的“3个按钮的事件同时触发”大概率是三次回调打印的混淆，实际不会触发其他未点击按钮的绑定逻辑。
额外的HTML语法问题：你的wrapper元素的class属性漏写了等于号，<div class"wrapper"> 需修正为 <div class="wrapper">，虽不会直接导致事件多次触发，但可能引发其他样式或选择器匹配异常。

修复方案

方案1：绑定前先清除已有事件

绑定点击事件前调用off('click')清空同类型已绑定事件，从根源避免重复绑定：

$('.listing .btn.apply').off('click').click(function(){
    let getTestName = $(this).parent().find('h1').text();
    console.log('getTestName: ', getTestName);
});

方案2：使用事件委托绑定

把事件绑定到页面初始化就存在的父级元素上，仅匹配目标按钮触发，既不会出现重复绑定问题，也能兼容后续动态新增的按钮：

// 这里用修正后的wrapper作为绑定父级即可，也可根据实际场景替换为document
$('.wrapper').on('click', '.btn.apply', function(){
    let getTestName = $(this).parent().find('h1').text();
    console.log('getTestName: ', getTestName);
});