动态生成的元素内的jQuery无法运行 [英] JQuery inside dynamically generated element doesn't run

问题描述

我有一个显示命令列表的索引，每个调用都会调用一个函数(当我从db中获取数据时用php命名)，为简化起见，我将每个div所包含的函数简化为一个警报.而且每隔一分钟，就会执行ajax函数，以搜索新订单并将其追加到顶部，并使用与最初加载的代码完全相同的代码. jQuery在最初加载的元素中运行完美，但在动态生成的元素中根本不起作用.

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.

这是内部有一个初始订单的索引，在newOrders首次运行之前.该订单的警报正常运行

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>

这是函数执行一次并在其顶部附加新命令及其相应脚本后的索引，该脚本是通过AJAX调用动态生成和接收的:

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>

如您所见，html和脚本完全相同，但是由ajax调用带来的新订单上的html和脚本不起作用.

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.

推荐答案

好吧，所以做更多的研究后，我找到了适合自己情况的最佳答案，如果有帮助，我会留在这里.

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

在我通过AJAX调用生成的内容中，我打印这样的脚本，并显然使用CSS将其隐藏:

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>

然后我每次返回AJAX调用时都要执行此功能

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

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

我只评估自己生成的字符串，因此在这种情况下，我认为使用eval()并非不安全.

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

这篇关于动态生成的元素内的jQuery无法运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！