如何使jQuery点击事件函数仅执行一次——即使多次引入包含该事件的脚本文件？

嘿，这个问题其实挺常见的——每次你重复引入script.php，那段事件绑定代码就会被执行一次，等于给document多挂了一个监听.tambah点击的处理函数，点击按钮时自然就会触发多次了。给你几个靠谱的解决办法：

1. 绑定前先移除原有事件（简单直接） #

每次绑定事件前，先移除document上针对.tambah的click事件处理，这样不管脚本被引入多少次，最后只会保留最新的那一个绑定：

$(document).off('click', '.tambah').on('click', '.tambah', function(){
    alert('tombol tambah telah ditekan');
});

注意：这个方式会移除所有绑定在document上针对.tambah的click事件，如果其他地方也有绑定同元素的点击事件，可能会被误删。

2. 使用事件命名空间（精准控制） #

给你的事件加个专属命名空间，这样就能只移除自己添加的事件，不会影响其他代码的绑定：

// 先移除带tambahBtn命名空间的click事件
$(document).off('click.tambahBtn', '.tambah')
// 绑定带命名空间的事件
.on('click.tambahBtn', '.tambah', function(){
    alert('tombol tambah telah ditekan');
});

这个方法更稳妥，因为命名空间相当于给你的事件加了个“标签”，只有带这个标签的事件会被移除，不会干扰其他逻辑。

3. 标记脚本是否已初始化（从根源避免重复执行） #

在脚本里加个标记，只有第一次引入时才执行绑定逻辑，后续引入直接跳过：

用全局变量标记 #

if (!window.tambahBtnInitialized) {
    $(document).on('click', '.tambah', function(){
        alert('tombol tambah telah ditekan');
    });
    window.tambahBtnInitialized = true;
}

用jQuery数据缓存标记（更优雅，不污染全局变量） #

if (!$(document).data('tambahBtnBound')) {
    $(document).on('click', '.tambah', function(){
        alert('tombol tambah telah ditekan');
    });
    $(document).data('tambahBtnBound', true);
}

这种方式从根源上阻止了重复绑定，不管脚本被引入多少次，事件只会绑定一次，是最彻底的解决办法之一。

额外提醒：避免重复引入脚本才是治本之道 #

上面的方法都是“补救”措施，最好的方式还是确保script.php只被引入一次——比如在模板里用条件判断，或者用模块加载工具来管理脚本依赖，从源头避免重复引入的问题。

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