点击Export按钮多次触发下载事件，jQuery动态绑定事件异常如何解决

问题根因 #

下载文件数随点击次数递增的核心原因是点击事件被重复绑定：

• 你使用$(document).on()事件委托的方式绑定导出按钮点击事件，如果这段绑定代码被放在会多次执行的函数/回调中，每执行一次就会给document新增一个同类型事件监听器
• 每次点击导出按钮时，所有绑定的监听器都会依次触发，第n次点击时就会触发n次下载逻辑，对应下载n个文件
• 额外注意：如果插入按钮的代码也被重复执行，会导致页面出现多个同id的导出按钮，也会加剧异常

修复方案 #

方案1：绑定前先移除已有同类型事件 #

在绑定事件前调用off()清除之前绑定的同名事件，避免重复叠加：

// 先移除之前绑定的导出点击事件，再绑定新事件
$(document).off('click', '#id_export_button').on('click', '#id_export_button', function() {       
    var a = document.createElement('a');
    a.href = 'data:text/csv;base64,' + btoa($('textarea')[0].value);
    a.download = 'File.csv';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);       
});

// 插入按钮前先判断是否已经存在，避免重复插入
if (!$('#localCreatedDIV').length) {
    $("textarea")[0].insertAdjacentHTML('afterend', '<div id="localCreatedDIV" style="width:100%; display: flex; flex-direction: row; margin-top: 15px; justify-content: space-between"><div id="localCreatedDIVSecond" style=""><button id="id_export_button">Export</button></div></div>');
}

方案2：直接给按钮绑定静态事件（更推荐） #

不要使用document全局事件委托，在插入按钮后直接给按钮绑定点击事件，从根源避免重复绑定问题：

// 先判断按钮容器不存在再插入
if (!$('#localCreatedDIV').length) {
    $("textarea")[0].insertAdjacentHTML('afterend', '<div id="localCreatedDIV" style="width:100%; display: flex; flex-direction: row; margin-top: 15px; justify-content: space-between"><div id="localCreatedDIVSecond" style=""><button id="id_export_button">Export</button></div></div>');
    // 插入完成后直接给按钮绑定点击事件，仅执行一次
    $('#id_export_button').on('click', function() {       
        var a = document.createElement('a');
        a.href = 'data:text/csv;base64,' + btoa($('textarea')[0].value);
        a.download = 'File.csv';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);  
    });
}

注：原代码中的with语句在严格模式下被禁用，上述修复代码已替换为直接给DOM属性赋值的写法，兼容性更好。

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