1

Estou com um problema em uma listagem, é o seguinte, tenho uma tabela, para cada linha tem um link para poder editar a linha, com isso, ao clicar nesse link se abre um modal do bootstrap com todo seu conteúdo vindo via Ajax, e até aqui esta tudo certo. E quando fecho o modal eu chamo um evento dele para poder atualizar a linha da tabela.

O meu problema é que fica acumulando as chamadas para essa atualização da linha, por exemplo: tenho a primeira linha, vou clico no botão editar, abre o modal, e quando eu fecho esse modal ele me atualiza os dados da linha clicada; dai quando clico em outro link de editar (ou até no mesmo), abre o modal e dai quando fecho esse modal ele me atualiza os dados da linha clicado, só que olhando o console eu vejo que ele faz a primeira e a segunda chamada das linhas para serem atualizadas, o que será que pode estar acumulando essas chamadas que só acontece quando eu fecho o modal?

Segue uma ideia do código, o que acontece nesse caso é que a cada vez que se abrir o modal, quando se fecha irá ficar acumulando o alert

$('a.edit_row_dt').on('click', function(e) {
    e.preventDefault();

    var item_id = $(this).data('id');
    var row = $(this).closest('tr');

    $('#edit').load('edit.php', {"id" : item_id}, function(){
            $('#edit').modal();

            $('#edit').on('hidden.bs.modal', function(event) {
                event.preventDefault();
                alert(item_id); // aqui 
                $('.modal-dialog').remove();
            });
        }
    );
});
1
  • Não consegui visualizar exatamente em qual evento está ocorrendo problema. O ideal é que o evento seja "agendado" apenas uma vez, porem, caso você precise de um comportamento diferente, pode sempre "Limpar" os eventos anteriores com: api.jquery.com/unbind antes de adicionar outro.
    – mau humor
    Commented 18/04/2016 às 20:11

2 Respostas 2

2

Antes de adicionar um handler ao evento "hidden.bs.modal", tente remover o handler anterior usando o método off do jQuery:

// Essa linha
$('#edit').off('hidden.bs.modal');

$('#edit').on('hidden.bs.modal', function(event) {
      event.preventDefault();
      alert(item_id); // aqui 
      $('.modal-dialog').remove();
 });
2
  • Tanto a sua resposta quando a do @abfurlan deu certo, dai uma pergunta, o que seria melhor? Commented 18/04/2016 às 20:20
  • 1
    Dá na mesma, de acordo com a documentação do método .one(): "[...]The .one() method is identical to .on(), except that the handler is unbound after its first invocation. [...] In other words, explicitly calling .off() from within a regularly-bound handler has exactly the same effect." Commented 18/04/2016 às 20:24
2

Utilize .one() ao invés de .on() ao fechar o modal, quando você utiliza .on() ele executa novamente a cada clique.

$('#edit').one('hidden.bs.modal', function(event) {
    event.preventDefault();
    alert(item_id); // aqui 
    $('.modal-dialog').remove();
});

JSFiddle

2
  • Tanto a sua resposta quando a do @MarcusVinicius deu certo, dai uma pergunta, o que seria melhor? Commented 18/04/2016 às 20:20
  • 1
    @MarceloDiniz você tem razão os dois funcionam, eu prefiro o .one() pois ele desencadeia automaticamente os eventos, além de ter que colocar menos código :)
    – abfurlan
    Commented 18/04/2016 às 20:25

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 .