Jquery'On'方法无法处理表上的动态追加行[重复]

Question

这个问题在这里已有答案：

• Event binding on dynamically created elements? 23回答

我有一个表格，我自己在html中添加了3行。我有一个“添加新行”按钮，在最后一个“td”中添加一个带有“编辑”按钮的新行。现在当我尝试点击这个新生成的“编辑”按钮时，我的脚本没有被调用。我不明白我的代码片段有什么问题。我读到了jquery“On”方法，它应该能够生成一个事件，但我不知道它为什么不在我的代码中生成事件。

$(document).ready(function() {

  $(".row").click(function() {


    var markup = "<tr ><td class='newRow' contenteditable='false'></td><td class='newRow' contenteditable='false'></td><td class='newRow' contenteditable='false'></td><td class='hideCol' contenteditable='false'><button id='myNewRow' class='btn btn-sm btn-mdb-color btn-rounded editbtn' >edit</button></td></tr>";


    $("table").append(markup);

  });
});

$(document).ready(function() {
  $('.editbtn').on('click', function() {
    console.log('sulabh')

    var currentTD = $(this).parents('tr').find('td');
    if ($(this).html() == 'Edit') {
      $.each(currentTD, function() {
        $(this).prop('contenteditable', true)
      });
    } else {
      $.each(currentTD, function() {
        $(this).prop('contenteditable', false)
      });
    }

    $(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="dt-more-row-col" class="table table-striped table-bordered" cellspacing="0" width="100%">
  <thead>

    <tr>
      <th class="th-sm">Name
      </th>
      <th class="th-sm">Position
      </th>
      <th class="th-sm">Office
      </th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td contenteditable='false' class='newRow'>Tiger Nixon</td>
      <td contenteditable='false' class='newRow'>System Architect</td>
      <td contenteditable='false' class='newRow'>Edinburgh</td>
      <td class="hideCol"><button id="edt" class="btn btn-sm btn-mdb-color btn-rounded editbtn">edit</button></td>

    </tr>
    <tr>
      <td contenteditable='false' class='newRow'>Garrett Winters</td>
      <td contenteditable='false' class='newRow'>Accountant</td>
      <td contenteditable='false' class='newRow'>Tokyo</td>
      <td class="hideCol"><button id="edt" class="btn btn-sm btn-mdb-color btn-rounded editbtn">edit</button></td>

    </tr>
    <tr>
      <td contenteditable='false' class='newRow'>Ashton Cox</td>
      <td contenteditable='false' class='newRow'>Junior Technical Author</td>
      <td contenteditable='false' class='newRow'>San Francisco</td>
      <td class="hideCol"><button id="edt" class="btn btn-sm btn-mdb-color btn-rounded editbtn">edit</button></td>

    </tr>
    <tr>
      <td contenteditable='false' class='newRow'>Cedric Kelly</td>
      <td contenteditable='false' class='newRow'>Senior Javascript Developer</td>
      <td contenteditable='false' class='newRow'>Edinburgh</td>
      <td class="hideCol"><button id="edt" class="btn btn-sm btn-mdb-color btn-rounded editbtn">edit</button></td>

    </tr>


  </tbody>
  <tfoot>
    <tr>
      <th>Name
      </th>
      <th>Position
      </th>
      <th>Office
      </th>
    </tr>

  </tfoot>
</table>

Answer 1

实际上哪些内容在dom上只适用于.click

哪些内容是动态的，你也想要处理点击然后点击使用文件

  $('.editbtn').on('click', function () { })

而不是上面的点击事件使用

$(document).on('.editbtn','click', function () { })