ajax加载后JavaScript不起作用（使用表）

Question

我有一个由数据库使用 php 自动生成的四行表...最后一行 (4) 有一个按钮来触发下面的函数...它对每一行重复。

单击按钮后...脚本发送更新数据库的请求以将状态“挂起”切换为“已取消”。

此时一切都很好......但是......当我用表格“$（'#lista'）.load（location.href +'#lista> *'）;”刷新div时

脚本在加载后第二次不起作用。 （div 更新没问题，但只能工作一次）

我需要脚本在第一次刷新后工作......每次我点击行按钮......

我认为这可能是 ajax 请求和 javascript 不兼容。

如果你能帮助我，我真的很感激。 谢谢大家。

<script>

var index, table = document.getElementById('table');
            for(var i = 1; i < table.rows.length; i++)
            {
                table.rows[i].cells[4].onclick = function()
                { //inicio da função
                    var c = confirm('Você quer cancelar essa aula?');
                    if(c === true)
                    {//inicio confirmador
                      var table = document.getElementById('table');
                        index = this.parentElement.rowIndex;
                        value_index_id= table.rows[index].cells[0].innerHTML;
                        var id = value_index_id;
                        $.ajax({
                  type: 'GET',
                  url: 'cancelar_aulas.php',
                  data: {id_geral:id},
                  success: function(data){
                    alert(data);
                    $( '#lista' ).load(location.href + ' #lista > *' );

                  }
              })

                    } //fim do confirmador

                    //validador
                    //console.log(index);
                    //console.log (value_index_id);
                    console.log(id);

                };//fim da função

            }
</script>";

Answer 1

您只是在页面加载时将 onclick 事件处理程序附加到表格。这就是为什么它只适用于第一次点击。当您向表中添加新数据时，您需要执行一些操作以将 onclick 事件添加到新行中。

有几种不同的方法可以做到这一点：

• jQuery 可以像这样将事件附加到动态创建的元素上：

  $("table").on("click", "table tr", function() {
      // Note that this event would fire for ALL rows, 
      // but it will automatically attach this event to new rows
      // that are added after page load
      // This would work, you just would have to check if the clicked
      // row is one of the last 4.
  }
  

• 创建自己的函数来附加事件，每次添加新行时都会运行该函数。比如：

  function AttachClick() {
      let table = document.getElementById("table");
      let position = table.rows.length;
      while (position > table.rows.length - 4) {
          table.rows[position].addEventListener("click", function() {
              // Do your on click here
              // On success, you would fire this "AttachClick()" function
          }
          position--;
      }
  }
  

注意while 循环从表的末尾而不是开头开始。如果您有一个包含很多行的表，那么从末尾开始迭代可能会更快（因为这些是您唯一关心的行）。