1

Tenho essa função modalConfirmacao que estou tentando usar para diversas funções. Nela eu passo o titulo e a mensagem do modal e a função a ser executada caso o usuário clique em 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);
}

Para chamar a função eu faço assim no onclick do botão:

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

A função excluirProduto tem uma chamada Ajax no php para excluir o produto.

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

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

            });
        }

Meu problema é que quando clico no botão que chama a função excluirProduto pela primeira vez ele executa a função 1 vez, da segunda vez 2 vez, da terceira vez 3 vezes e assim por diante. O que pode estar acontecendo? Estou passando ou chamando a função erroneamente?

2 Respostas 2

0

O on() do jQuery acumula os manipuladores de eventos, isto é, cada vez que for chamada a modalConfirmacao(), ele vai ligar o manipulador de evento de novo no click do botão OK.

Você teria que mudar o código para realizar a ligação do evento click com o botão OK uma vez apenas, ou usar off(), para "desligar" um manipulador:

$("#ok").off("click").on("click", funcao);
7
  • Obrigado pela atenção. A sugestão do off funcionou perfeitamente!!! Você sugeriu também mudar o código para fazer a ligação do evento click apenas uma vez. Como faria isso?
    – L.J
    31/05/2018 às 19:36
  • Pensando melhor, talvez não tenha jeito, mesmo. 31/05/2018 às 19:42
  • Então dentro da função prepararModal eu teria : $("#ok").on("click",funcao_que_manipula_ok); E dentro da função modalConfirmacao de alguma forma fazer com que essa função prepararModal seja executada uma unica vez?
    – L.J
    31/05/2018 às 19:44
  • Pelo que eu entendi então, toda vez que chamo a função modalConfirmacao ele estava colocando um novo evento, ai estava meio que acumulando fazendo executar a função o numero de vezes que o botão foi clicado, mais ou menos isso? Acho que entendi mas não consigo explicar...rsrs
    – L.J
    31/05/2018 às 19:47
  • Dentro de modalConfirmacao() pode ter uma função, por exemplo, function estadoSetado() { return modalConf.estado; } e pode ter duas variáveis, var estado; e var modalConf = this;. Daí, na chamada de prepararModal(func), você faz if (!estadoSetado()) { preparaModal(excluirProduto); estado = true; }... Ficou complicado :( 31/05/2018 às 19:54
0

Você também poderia usar algumas funções do JavaScript para executar uma função apenas uma vez, depois dê uma lida referente ao Throttle e Debouncenesse link: Throttling e Debouncing

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .