Question

我有一个索引，其中显示了带有调用函数的按钮的订单列表（为简化起见，我将按钮调用的函数简化为警报），而且还有每分钟执行一个ajax函数以搜索新的函数使用与最初加载的代码完全相同的代码对它们进行排序和追加到顶部。该按钮在最初加载的元素中效果很好，但在动态生成的元素中根本不起作用。

这是内部有一个初始订单的索引，在newOrders首次运行之前。该订单上的按钮正常工作

<div id="content">
  <div id="pedido_4126" class="pedido">
    <h4>Pedido 4126</h4>
    <button id="btn4126">Alert</button>
    <script>
     $("body").on("click","#btn4126",function(){
      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>

这是函数执行一次并在顶部附加新顺序时的索引：

<div id="content">
  <div id="pedido_4255" class="pedido">
    <h4>Pedido 4255</h4>
    <button id="btn4255">Alert</button>
    <script>
     $("body").on("click","#btn4255",function(){
      alert("Pedido 4255");
    });
    </script>
  </div>
  <div id="pedido_4126" class="pedido">
    <h4>Pedido 4126</h4>
    <button id="btn4126">Alert</button>
    <script>
     $("body").on("click","#btn4126",function(){
      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调用带来的新命令上的按钮和功能不起作用，而另一个按钮仍然可以正常工作。

编辑：我已经见过other questions关于将事件绑定到动态生成的元素的信息，并且实际上已经通过将函数绑定到静态祖先的后代来应用我在那些答案中看到的内容：

 $("body").on("click","#btn4126",function(){
      alert("Pedido 4126");
    });

动态插入的元素内的jQuery函数不起作用

0 个答案: