1

Quando clicava no item do menu da minha aplicação ela sempre atualizava a página, estou alterando para atualizar via ajax as páginas contudo estou com dificuldades em relação a funções com nomes baseado no evento de classes, exemplo a função delete quando eu clico é chamada a função da página anterior e da página atual. Teria como remover tudo da página anterior? Exemplo: Clico em página de cidade e após clico na pagina Pais, a função Open carrega a index, quando eu clico no botão delete é chamado 2 vezes, sendo a index de cidade nao está mais sendo demonstrada.

function Open(url, descricao) {
       // event.preventDefault();
        url = '@Url.Content("~/")' + url;
        $.ajax({
            url: url,
            type: 'GET',
            success: function (response) {
                console.log("s");
                $('#principal').html($(response).find('#Conteudo2'));
                window.history.pushState("object or string", descricao, url);

            },
            error: function () {
                alert('Ocorreu um erro!');
            }
        });
    }
    
    $(document).on("click", ".btn-delete", function () {
            var link = $(this).attr("id");
            var removeItemEl = $(this);

            confirm("Você tem certeza que deseja excluir o pais registro?",

                function () {
                    $.ajax({
                        type: "POST",
                        url: "Pais/delete",
                        data: {
                            id: link
                        },
                        success: function (data) {
                            removeItemEl.closest("tr").remove();
                        },
                        error: function (data) {
                            alert("O País já foi utilizado, não é possível deletar o registro!");
                        }
                    })
                }

                , "Confirmação de exclusão");


        });

7
  • Ele chama o evento da página anterior, exemplo cliquei na tela e cidade e após na tela de Pais a rotina chama o evento das 2 telas. @dvd
    – Zica
    Commented 3/03/2018 às 19:14
  • Não eu carrego primeiro uma tela e no onclic eu chamo o metodo open que carrega a segunda tela, após se eu interagir com o botão delete é chamado 2 vezes a função @dvd
    – Zica
    Commented 3/03/2018 às 19:26
  • @dvd a tela são as index.
    – Zica
    Commented 3/03/2018 às 19:38
  • @dvd sim cada uma index diferente e funções diferente.
    – Zica
    Commented 3/03/2018 às 19:43
  • @dvd isso mesmo
    – Zica
    Commented 3/03/2018 às 19:46

1 Resposta 1

0

Como você está carregando páginas externas que vêm com os mesmos eventos que já existem, você pode cancelar os eventos atuais antes de carregar o novo conteúdo, usando o método .off() do jQuery.

Você pode cancelar um evento para um seletor específico:

$(document).off("click", ".btn-delete");

Ou pode cancelar todos:

$(document).off();

Mais sobre o método .off() na documentação oficial.

4
  • uma dúvida quando uso o comando off ele bloqueia o evento de abertura do menu,uso o data-toggle dentro da tag <a> para ligar com a tag <ul>. Sabe o que pode ser?
    – Zica
    Commented 4/03/2018 às 12:50
  • @Zica Atualizei a resposta.
    – Sam
    Commented 4/03/2018 às 20:39
  • obrigado funcionou, uma pergunta você considera uma boa prática fazer atualização assim? Porque tem que lembrar pra adicionar as classe para remover, o que pode ser um problema. Segui esse post para fazer essa ideá pt.stackoverflow.com/questions/31954/…
    – Zica
    Commented 4/03/2018 às 21:56
  • 1
    Acho que cada página que vc carrega deve ter suas próprias funções. Pode até usar a mesma classe .btn-delete, mas deveria ter um outro seletor que diferenciasse um do outro. Por exemplo, uma div que "abriga" o botão com outra classe ou id diferente assim não teria esse problema.
    – Sam
    Commented 4/03/2018 às 22:08

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 .