动态生成的元素内的jQuery无法运行

Question

I have an index which shows a list of orders, each of wich calls a function (named dinamically with php when i brought the data from the db), to simplify i've reduced the function that each div contains to just an alert. But also every minute an ajax function executes that searches for new orders and appends them on top, with the exact same code as the ones initially loaded. The jquery works perfectly in the elements that are loaded initially but doesn't work at all in the elements generated dinamically.

This is the index with one initial order inside, BEFORE newOrders runs for the first time. The alert on that order functions properly

<div id="content">
  <div id="pedido_4126" class="pedido">
    <h4>Pedido 4126</h4>
    <button id="btn4126">Alert</button>
    <script>    
      alert("Pedido 4126");
    </script>
  </div>
</div>
<script>
  function newOrders() {
    var xhttp = new XMLHttpRequest();
    xhttp.open("POST", "simplereq.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
       var response = JSON.parse(this.responseText);
       console.log(response);
      var element = document.querySelector('#content');
      var content = element.innerHTML;
      ultimoid = response.ultimoid;
      element.innerHTML = response.contenido + content;
      }
    };
    xhttp.send("ultimoid="+encodeURIComponent(ultimoid));
  }
  setInterval(newOrders, 60000);
</script>

And this is the index when the function has executed once and appended a new order on top with it's corresponding script, dynamically generated and received from the AJAX call:

<div id="content">
  <div id="pedido_4255" class="pedido">
    <h4>Pedido 4255</h4>
    <button id="btn4255">Alert</button>
    <script>
      alert("Pedido 4255");
    </script>
  </div>
  <div id="pedido_4126" class="pedido">
    <h4>Pedido 4126</h4>
    <button id="btn4126">Alert</button>
    <script>
      alert("Pedido 4126");
    </script>
  </div>
</div>
<script>
  function newOrders() {
    var xhttp = new XMLHttpRequest();
    xhttp.open("POST", "simplereq.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
       var response = JSON.parse(this.responseText);
       console.log(response);
      var element = document.querySelector('#content');
      var content = element.innerHTML;
      ultimoid = response.ultimoid;
      element.innerHTML = response.contenido + content;
      }
    };
    xhttp.send("ultimoid="+encodeURIComponent(ultimoid));
  }
  setInterval(newOrders, 60000);
</script>

As you can see, the html and script are exactly the same, but the one on the new order brought by the ajax call, doesn't work.

Answer 1

Ok, so doing more research I came upon the best answer for my case, I'll leave it here in case it helps someone:

In the content I generate in the AJAX call, I print the scripts like this, and obviously hide it with css:

<div class="javascript">
     $("body").on("click","#btn4255",function(){
      alert("Pedido 4255");
    });
    </div>

And then I execute this function every time the AJAX call is returned

$('.javascript').each(function() {
      eval($(this).text());
    });

I only evaluate strings I generate myself so in this case I think it's not unsafe to use eval().