Question

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

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

<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调用动态生成和接收的：

<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和脚本不起作用。

Answer 1

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

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

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

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

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

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

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

1 个答案: