Error executing function passed via parameter in javascript

Question

I have this modal functionConfirmation that I’m trying to use for various functions. In it I pass the title and the modal message and the function to be executed if the user click OK.

function modalConfirmacao(titulo, mensagem,funcao) {
    var htmlModal = '<div class="modal fade" id="modalDefault" tabindex="-1" role="dialog"  aria-hidden="true">' +
                        '<div class="modal-dialog">'+
                            '<div class="modal-content">'+
                                '<!-- Modal Header -->'+
                                '<div class="modal-header">'+
                                    '<h4 class="modal-title" id="myModalLabel">'+
                                        titulo
                                    +'</h4>'+
                                    '<button type="button" class="close" data-dismiss="modal">'+
                                        '&times;'+
                                    '</button>'+
                                '</div>'+
                                '<!-- Modal Body -->'+
                                '<div class="modal-body">'+
                                    mensagem
                                +'</div>'+
                                '<!-- Modal Footer -->'+
                                '<div class="modal-footer">'+
                                    '<button type="button" id="ok" class="btn btn-primary" data-dismiss="modal">'+
                                        'OK'+
                                    '</button>'+
                                    '<button type="button" id="cancelar" class="btn btn-default" data-dismiss="modal">'+
                                        'Cancelar'+
                                    '</button>'+
                                '</div>'+
                            '</div>'+
                        '</div>' +
                    '</div>';
            $('body').append(htmlModal);
            $("#modalDefault").modal();
            $("#ok").on("click",funcao);
}

To call the function I do so on the onclick of the button:

modalConfirmacao("Confirmar","Tem certeza que deseja excluir o produto "+codigo+"?",excluirProduto);

The excluirProduct function has an Ajax call in php to delete the product.

function excluirProduto(codigo){
            $.post('excluirproduto.php',{codigo:codigo},function(e){
                e = $.parseJSON(e);
                if(e){
                    alert("Produto excluido");

                }else{
                    alert("Erro ao excluir produto");
                }

            });
        }

My problem is that when I click the button that calls the function excluirProduct for the first time it runs the function 1 time, the second time 2 time, the third time 3 times and so on. What could be going on? I am passing or calling the function erroneously?

Answer 1

You could also use some Javascript functions to run a function just once, then read about the Throttle and Debounceat that link: Throttling and Debouncing

Answer 2

The on() jQuery accumulates event handlers, that is, each time it is called to modalConfirmacao(), it will turn on the event handler again on click of the OK button.

You would have to change the code to perform the event call click with the OK button only once, or use off(), to "disconnect" a manipulator:

$("#ok").off("click").on("click", funcao);