Error executing function passed via parameter in javascript

Question

Error executing function passed via parameter in javascript

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I have this modalConfirmation function that I'm trying to use for several functions. In it I pass the title and the modal message and the function to execute if the user clicks 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 in the onclick of the button:

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

The deleteProduct 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 excludeProduct function for the first time it performs the function 1 time, the second time 2 times, the third time 3 times, and so on. What could be happening? Am I passing or calling the function erroneously?

javascript jquery

asked by anonymous 31.05.2018 / 21:20

2 answers

0

You could also use some JavaScript functions to perform a function only once, then give a read for Throttle and Debounce on that link: Throttling and Debouncing

01.06.2018 / 16:51

Problem with form + ajax Select without repeating data

score 0 · Accepted Answer

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

You would have to change the code to bind the click event with the OK button once, or use off() , to "hang" a handler:

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