js 中 给方法绑定事件 叠加执行

前言

       项目中用的是bootstrap 模板，在一个功能页面中复用了同一个 模态框（modal），但是模态框中的修改按钮应该是不同的事件，所以考虑的就是给该按钮绑定不同的事件。

第一次

// 要绑定的方法
function editPermission(){
    alert(1);
}

// 绑定
$("#menuChangeBtn").click(editPermission());

这样在执行到绑定的代码时就会弹出 1 

第二次

// 要绑定的方法
function editPermission(){
    alert(1);
}

// 绑定
$("#menuChangeBtn").one("click", editPermission);

去掉括弧后就相当于引用了，可以正常绑定，但是如果多次执行了这个 绑定语句，就会给按按钮绑定多次事件，结果就是 多次弹出 1

第三次

// 要绑定的方法
function editPermission(){
    alert(1);
}

// 绑定
$("#menuChangeBtn").one("click", editPermission);

照着网上搜索的结果，用了个one 方法来绑定，当时不知道怎么就觉得成功，第二天发现还是重复执行了

第四次

// 要绑定的方法
function editPermission(){
    alert(1);
}

// 绑定
$("#menuChangeBtn").off("click").one("click", editPermission);

先用 off 方法清空该 元素的点击事件，再经行绑定，亲测可用！不会再出现事件叠加的情况

绑定外部方法传参

$("#menuChangeBtn").off('click').one("click", {"roleId": roleId, "gameId": gameId}, setGameMenu);

 function setGameMenu(event) {
    alert(event.data.roleId);
    alert(event.data.gameId);
}