PrestaShop重复绑定.click事件触发两次点击，如何仅保留一份生效？

解决方案 #

方案1：绑定前清空已有同类型事件（推荐，改动最小）

每次执行绑定逻辑前，先移除该元素上已绑定的所有click事件，再重新绑定，无论代码加载多少次，最终都只会保留一份生效的事件。
修改后的代码如下：

$(function () {
    // 仅新增了.off('click')逻辑，其余业务代码无需改动
    $(".ajax_table_link").off('click').click(function () {
        var link = $(this);
        $.post($(this).attr('href'), function (data) {
            if (data.success == 1) {
                showSuccessMessage(data.text);
                if (link.hasClass('action-disabled')){
                    link.removeClass('action-disabled').addClass('action-enabled');
                } else {
                    link.removeClass('action-enabled').addClass('action-disabled');
                }
                link.children().each(function () {
                    if ($(this).hasClass('hidden')) {
                        $(this).removeClass('hidden');
                    } else {
                        $(this).addClass('hidden');
                    }
                });
            } else {
                showErrorMessage(data.text);
            }
        }, 'json');
        return false;
    });
});

方案2：新增全局绑定标记，仅执行一次绑定逻辑

通过全局自定义变量标记绑定状态，代码重复加载时直接跳过绑定逻辑，性能更优，适合元素不会动态新增的场景。
代码如下：

// 已绑定过则直接终止执行
if (window.AJAX_TABLE_LINK_BOUND) return;
window.AJAX_TABLE_LINK_BOUND = true;

$(function () {
    $(".ajax_table_link").click(function () {
        var link = $(this);
        $.post($(this).attr('href'), function (data) {
            if (data.success == 1) {
                showSuccessMessage(data.text);
                if (link.hasClass('action-disabled')){
                    link.removeClass('action-disabled').addClass('action-enabled');
                } else {
                    link.removeClass('action-enabled').addClass('action-disabled');
                }
                link.children().each(function () {
                    if ($(this).hasClass('hidden')) {
                        $(this).removeClass('hidden');
                    } else {
                        $(this).addClass('hidden');
                    }
                });
            } else {
                showErrorMessage(data.text);
            }
        }, 'json');
        return false;
    });
});

如果你的列表元素是动态渲染的，可以将绑定逻辑改为事件委托写法，后续新增的元素也能正常触发事件：

if (window.AJAX_TABLE_LINK_BOUND) return;
window.AJAX_TABLE_LINK_BOUND = true;

$(function () {
    // 事件委托绑定到document，无需重复绑定
    $(document).on('click', '.ajax_table_link', function () {
        var link = $(this);
        $.post($(this).attr('href'), function (data) {
            if (data.success == 1) {
                showSuccessMessage(data.text);
                if (link.hasClass('action-disabled')){
                    link.removeClass('action-disabled').addClass('action-enabled');
                } else {
                    link.removeClass('action-enabled').addClass('action-disabled');
                }
                link.children().each(function () {
                    if ($(this).hasClass('hidden')) {
                        $(this).removeClass('hidden');
                    } else {
                        $(this).addClass('hidden');
                    }
                });
            } else {
                showErrorMessage(data.text);
            }
        }, 'json');
        return false;
    });
});

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