Custom function gets called once more at every click

Question

I am new to Angular JS and I've set up a basic HTML page with a table of items. I want to be able to delete each item separately, so I added a column containing a delete button for each row of my HTML table. This is what this column looks like.

And my Angular JS function:

$scope.deleteRole = function(){
    var data = {
                codeRole: $scope.code_role,
                descRole : $scope.desc_role
               };
    console.log(data);
};

My problem is each time I click on my delete button, my function gets called once more than the previous time. To clarify: first time I click, function is called once, second time I click, function is called twice, etc.

I would like my function to be called only once when I click on my delete button.

Has anyone faced a similar issue ? I have read a lot of stackoverflow questions about functions being called multiple times but I haven't been able to fix my issue.

Thanks in advance for your help.

EDIT: here's my console output after two clicks

EDIT 2: I figured out what what causing the problem: I had a modal set up, acting as a confirmation and if I remove it my code behaves as it should (only one call is made to the function) Here is a fiddle that reproduces the problem: https://jsfiddle.net/w6edum0f/12/.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.roles = [
{
    "codeRole": "test",
    "descRole": "test desc"
  },
  {"codeRole": "test2",
    "descRole": "test desc1"
  }
];
  $scope.selectRole = function(role) {
    $scope.code_role = role.codeRole;
    $scope.desc_role = role.descRole;
  };

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

georgeawg · Accepted Answer

first time I click, function is called once, second time I click, function is called twice, etc.

That happens because the code is adding another click handler on each call:

ERRONEOUS

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

One solution is to remove the click handler once called:

$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);
};

Custom function gets called once more at every click

Answers (2)

Related Questions