Javascript does not work after update div

Question

I have a button Atualiza Conteudo that if someone clicks does a refresh only in the div content and does not update the entire page.

So far so good, it turns out that the nova_pagina.php that I am including after the back click an example button that when being clicked it disappears, I used a function in javascript only that it does not work on index.php.

How do I fix this and make that inside the index.php also work?

index php.

<div id="content">
</div>
<input id="updateContent" type="button" value="Atualizar Conteudo" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var url = 'nova_pagina.php';

var updateContent = document.getElementById("updateContent");
var content = document.getElementById("content");

updateContent.addEventListener("click", function (event) {
  var request = new XMLHttpRequest();
  request.open("GET", url, true);
  request.addEventListener("readystatechange", function (event) {
    if (request.readyState == 4 && request.status == 200) {
      content.innerHTML = request.responseText
    }
  });
  request.send();
});
</script>

nova_pagina.php

<div class="mydiv">
<input type="button" class="esconderBotao" value="Esconder Botao" />
</div>

<script>    
$(".mydiv").on("click", ".esconderBotao",function () {
     $(".esconderBotao").css('display','none');  
});
</script>

Answer 1

Scripts returned via AJAX are not automatically executed when loaded with the property .innerHTML. This way, you need to "force" your execution with the eval():

index php.:

<div id="content">
</div>
<input id="updateContent" type="button" value="Atualizar Conteudo" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var url = 'nova_pagina.php';

var updateContent = document.getElementById("updateContent");
var content = document.getElementById("content");

updateContent.addEventListener("click", function (event) {
  var request = new XMLHttpRequest();
  request.open("GET", url, true);
  request.addEventListener("readystatechange", function (event) {
    if (request.readyState == 4 && request.status == 200) {
      content.innerHTML = request.responseText;
      eval(document.getElementById('scriptAjax').innerHTML);
    }
  });
  request.send();
});
</script>

nova_pagina.php:

<div class="mydiv">
<input type="button" class="esconderBotao" value="Esconder Botao" />
</div>

<script id="scriptAjax">
$(".mydiv").on("click", ".esconderBotao",function () {
     $(".esconderBotao").css('display','none');  
});
</script>

Notice I’ve added one id="scriptAjax" in the file script nova_pagina.php. Already in the index.php added this line:

eval(document.getElementById('scriptAjax').innerHTML);

She is responsible for running Javascript by selecting it from id.

More details and merit are in Soen - Calling a Javascript Function returned from AJAX Response (in English).

Recommended reading: Eval() - Javascript | MDN

---

Whereas you are loading the jQuery library, another alternative is to use the method .html(). With it scripts are normally executed when defined in the document.

Just change this part of your script:

// ...
  request.addEventListener("readystatechange", function (event) {
    if (request.readyState == 4 && request.status == 200) {
      //content.innerHTML = request.responseText
      $('#content').html(request.responseText);
    }
  });
// ...

---

It is known that Using pure Javascript makes your application faster. Especially if you are using only to define the style of an element, as it is in your code:

<script id="scriptAjax">
    $(".mydiv").on("click", ".esconderBotao",function () {
         $(".esconderBotao").css('display','none');  
    });
</script>

Then the best thing is do not use jQuery:

<script id="scriptAjax">
    document.querySelector('.esconderBotao').addEventListener('click', function(){
        this.style.display = 'none';
    });
</script>