Javascript 每次单击时都会再次调用自定义函数

我是Angular JS的新手，我已经建立了一个包含项目表的基本HTML页面。 我希望能够分别删除每个项目，因此我为HTML表的每一行添加了一列，其中包含一个删除按钮。 这就是本专栏的内容

<td headers="deleteRoleHeader" class="cell-texte">
    <span class="glyphicon glyphicon-trash" ng-click="deleteRole();"></span>
</td>

我的问题是，每次单击delete按钮时，我的函数都会比上一次多调用一次。 澄清：第一次单击时，函数调用一次，第二次单击时，函数调用两次，以此类推

我希望当我点击删除按钮时，我的函数只被调用一次

有没有人面临过类似的问题？ 我读过很多关于函数被多次调用的stackoverflow问题，但是我还没有解决我的问题

提前感谢你的帮助

编辑：点击两次后，这里是我的控制台输出

编辑2:我找出了问题的原因：我设置了一个模式，作为确认，如果我删除了它，我的代码就会正常运行（只对函数进行了一次调用） 这里有一把小提琴再现了这个问题：

---

好的，伙计们，我试着制作一个小的angular应用程序，并试着运行相同的代码，这样我们将处于相同的环境中：

链接到jsfiddle

原因：原因是冒泡，当我们单击对话框中的

OK

按钮时，该对话框在单击

删除
后打开，然后冒泡开始，所以为了处理Bubbing，我尝试以下技巧，如果您愿意，可以尝试另一个：p

  $scope.deleteRole = function(){
         $('#deleteModal').show();
         var isDeleteBtnClicked = false;
            $('#deleteBtn').click(function($event){
                if(!isDeleteBtnClicked)
                {
                    $('#deleteModal').hide();
                    var data = {
                        codeRole: $scope.code_role,
                               descRole : $scope.desc_role
                           };
                    console.log(data);
                    isDeleteBtnClicked = true;
                }

        });
    };

下面是正在运行的代码片段：



删除角色
代码
描述
压制
{{role.codeRole}}
{{role.descRole}}
删除
确认书
&时代；
你要什么

供给者
费尔默
var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.roles=[
{
“代码角色”：“测试”，
“描述角色”：“测试描述”
},
{“codeRole”：“test2”，
“描述角色”：“测试描述1”
}
];
$scope.selectRole=功能（角色）{
$scope.code_role=role.code角色；
$scope.desc_role=role.descRole；
};
$scope.deleteRole=函数（）{
$（'#deleteModal'）.show（）；
var isDeleteBtnClicked=false；
$（'#deleteBtn'）。单击（函数（$event）{
如果（！IsDeletebtn已单击）
{
$（'#deleteModel'）.hide（）；
风险值数据={
codeRole:$scope.code\u角色，
描述角色：$scope.desc_角色
};
控制台日志（数据）；
IsDeleteTebtnClicked=true；
}
});
};
});

第一次单击时，函数调用一次，第二次单击时，函数调用两次，以此类推

这是因为代码在每个调用上添加了另一个单击处理程序：

错误的

$scope.deleteRole = function(){
    $('#deleteModal').show();
    $('#deleteBtn').click(function(){
        $('#deleteModal').hide();
        var data = {
            codeRole: $scope.code_role,
            descRole : $scope.desc_role
        };
        console.log(data);
    });
};

一种解决方案是在调用后删除单击处理程序：

$scope.deleteRole = function(){
    $('#deleteModal').show();
    $('#deleteBtn').on("click", hideModal);
};
function hideModal(){
    $('#deleteModal').hide();
    $('#deleteBtn').off("click", hideModal); 
    var data = {
        codeRole: $scope.code_role,
        descRole : $scope.desc_role
    };
    console.log(data);
};

您的日志中打印了哪些数据？所有函数调用都一样吗？我从单击的行中获取数据。下面是我的HTM表格行之一的示例：角色1 |用户|删除按钮。在我的函数中，我会得到关于这一行的数据，但显示了几次。因此，在单击
span
两次之后，您会看到
数据记录了三次？这有点模棱两可。这可能意味着在点击4次后，它会在控制台中出现4次，或者出现10次。你能确认一下吗？你说的。不清楚它对你的意义和对我的意义是否相同。单击
span
两次后，数据打印了多少次？我正在处理，我想10分钟后会给你解决方案
$scope.deleteRole = function(){
    $('#deleteModal').show();
    $('#deleteBtn').click(function(){
        $('#deleteModal').hide();
        var data = {
            codeRole: $scope.code_role,
            descRole : $scope.desc_role
        };
        console.log(data);
    });
};

$scope.deleteRole = function(){
    $('#deleteModal').show();
    $('#deleteBtn').on("click", hideModal);
};
function hideModal(){
    $('#deleteModal').hide();
    $('#deleteBtn').off("click", hideModal); 
    var data = {
        codeRole: $scope.code_role,
        descRole : $scope.desc_role
    };
    console.log(data);
};