jQuery使用on方法绑定ajax点击事件多次触发如何解决？

问题根因 #

你当前的事件绑定逻辑写在populate_content函数内部，每次渲染内容执行该函数时，都会给.content_download元素新增一个click事件监听，没有清理之前绑定的回调，所以函数调用多少次就会叠加多少个事件回调，点击按钮时自然会触发多次AJAX请求。

适配新版jQuery的解决方案 #

推荐两种符合jQuery 3.x规范的修复方案，不需要使用废弃的unbind/die等方法：

方案1：绑定前清理旧事件（快速修复） #

每次绑定click事件前，先调用off()方法清理同类型的旧事件，确保同一时间只有一个回调生效：

(function ($) {
    /* initialize */
    var content = function(obj, settings) {
        /* populate content */
        var populate_content = function(el){
            var el_index = instance_vars.elem_index;
            if(content_curr_opts.download) {
                if(el.download) {
                    $('.content_download').show();
                    // 先off清除之前绑定的click事件，再绑定新事件
                    $('.content_download').off('click').on('click' , function(){
                        var datumA = datum1NeededForAjaxFunction;
                        var datumB = datum2NeededForAjaxFunction;
                        $.ajax({
                            url:    '/ajaxScripts/foobar.php',
                            type:   'POST',
                            dataType: 'json',
                            data: {
                                'dlLink': datumA,
                                'dlName': datumB
                            },
                            success: function(data){
                                // 成功逻辑
                            }
                        });
                    });
                } else {
                    $('.content_download').hide();  
                }
            }
        };
    };
})(jQuery);

方案2：事件委托（性能更优，推荐） #

把事件绑定移到初始化逻辑里，只执行一次，利用jQuery的事件委托机制监听动态元素的点击事件，每次渲染内容时仅更新按钮绑定的数据即可：

(function ($) {
    /* initialize */
    var content = function(obj, settings) {
        // 初始化阶段只绑定一次事件，委托到不会被动态替换的父容器即可，这里用document做示例，可替换为你实际的静态上层容器
        $(document).on('click', '.content_download', function() {
            // 从按钮的data属性中取请求需要的参数
            var datumA = $(this).data('dlLink');
            var datumB = $(this).data('dlName');
            $.ajax({
                url:    '/ajaxScripts/foobar.php',
                type:   'POST',
                dataType: 'json',
                data: {
                    'dlLink': datumA,
                    'dlName': datumB
                },
                success: function(data){
                    // 成功逻辑
                }
            });
        });

        /* populate content */
        var populate_content = function(el){
            var el_index = instance_vars.elem_index;
            if(content_curr_opts.download) {
                if(el.download) {
                    // 仅更新按钮的参数和显隐，不需要重复绑定事件
                    $('.content_download')
                        .show()
                        .data('dlLink', datum1NeededForAjaxFunction)
                        .data('dlName', datum2NeededForAjaxFunction);
                } else {
                    $('.content_download').hide();  
                }
            }
        };
    };
})(jQuery);

方案2避免了每次渲染都重复操作事件绑定，性能更好，也不会出现事件叠加的问题，更适合频繁更新内容的场景。

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