Recover element instance after it is rewritten

Asked

Viewed 35 times

0

I have an HTML element and this element has an interaction with Javascript, but after performing a certain task this element is totally rewritten and with that my instantiation stops working. I wouldn’t do it that way, but the problem is that the system is like this and I’m not allowed to change it, so I have to turn around and make this instance work again even after the rewrite. I don’t know if there’s a solution to this kind of problem, but I need to turn around and find a way. That’s not the problem, but I made a small example so that you understand my problem better:

$(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>

javascript

  • One question, you just need to change the button text and the Alert function keep working right?

  • Events go up to the ancestral elements. By adding a Liener to the parent of the clicked element you can solve your problem. That helping.

  • The code used is just a simulate the problem. In this case I can only access the particular element, but I cannot prevent it from being rewritten (it is someone else who takes care of such a thing and it has already been decided by them that the content will continue to be rewritten). My problem is that I need to perform a task every time such element is clicked, but after it is clicked it will always be rewritten (and it is in this rewrite that my task stops working)

  • I will try to do this, Daviaragao. I hope it works, it already "hits the head" too much trying to solve this. It’s pretty complicated when someone on the team does something that’s clearly not the best solution, but they won’t change their mind

1 answer

3


What you can do is put the event on document with selector of (function’s 2nd parameter). This way you yourself override the button, if its selector remains the same, the event will run.

$(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>

  • Funcionouuuuuuuuu! I thought I would not have a solution to this

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.