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

时间:2019-07-18 20:31:46

标签: javascript jquery ajax

我有一个显示命令列表的索引,每一个调用一个函数(当我从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和脚本不起作用。

1 个答案:

答案 0 :(得分:-1)

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

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

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

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

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

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