0

Tenho um elemento HTML e esse elemento tem uma interação com o JavaScript, mas apôs realizar uma determinada tarefa esse elemento é totalmente reescrito e com isso a minha instancia para de funcionar. Eu não faria desse jeito, mas o problema é que o sistema é assim e eu não tenho permissão para alterá-lo, então preciso me virar e fazer essa instancia voltar a funcionar mesmo depois da reescrita. Não sei se existe uma solução para esse tipo de problema, mas preciso me virar e conseguir um jeito. Não é esse o problema, mas fiz um pequeno exemplo para que entendam melhor o meu problema:

$(function(){

	$("button").on("click", function(){
  
  	alert("Sobrescreveu botão e agora o alert não irá mais funcionar");
  	$(".conteudo").html("<button>Altera conteúdo</button>");
  
  })

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="conteudo">
  <button>Altera conteúdo</button>
</div>

4
  • Uma pergunta, você só precisa alterar o texto do botão e a função do alert continuar funcionando certo?
    – sant0will
    8/04/2019 às 11:35
  • Os eventos sobem para os elementos ancestrais. Adicionando um listener ao pai do elemento clicado você consegue resolver o seu problema. Isso ajuda.
    – DaviAragao
    8/04/2019 às 11:40
  • O código usado é apenas uma simular o problema. No caso eu só posso acessar o determinado elemento, mas não posso impedir que ele seja reescrito (é outra pessoa que cuida de tal coisa e já foi decidido por eles de que o conteúdo irá continuar sendo reescrito). Meu problema é que eu preciso realizar uma tarefa toda vez que tal elemento é clicado, mas apôs ser clicado ele sempre vai ser reescrito (e é nessa reescrita que minha tarefa para de funcionar) 8/04/2019 às 11:42
  • Vou tentar fazer isso, DaviAragao. Tomara que funcione, já "bate a cabeça" demais tentando resolver isso. É bem complicado quando alguém na equipe faz algo que claramente não é a melhor solução, mas não aceitam mudar de ideia 8/04/2019 às 11:44

1 Resposta 1

3

O que você pode fazer é colocar o evento no document com seletor do (2º parâmetro da função). Desse jeito você mesmo que você sobrescreva o botão, se o seletor dele continuar o mesmo, o evento vai ser executado.

$(function() {
    $(document).on("click", "button", function() {
        alert("Sobrescreveu botão e agora o alert não irá mais funcionar");
        $(".conteudo").html("<button>Altera conteúdo</button>");
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="conteudo">
  <button>Altera conteúdo</button>
</div>

1
  • Funcionouuuuuuu! achei que não teria uma solução pra isso 8/04/2019 às 11:45

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 .