javascript - 如何修复追加功能后表格行未被单击的问题？

Question

每次单击关联按钮时，我都尝试创建一个新的表行。但是，一旦我单击按钮并选择该行，它就不会突出显示。我有一个append传递 <tr> 的函数到 html。我的最终目标是让附加的新行变得可点击并且可以选择。

代码:

<div class="col-md-3 left-pane">
  <div class="row justify-content-md-center">
    <button class="btn btn-sm btn-block eNew">New Tier</button>
  </div>

  <hr>
  <table class="table table-sm table-hover tAdd">
    <tbody>
      <tr>
        <td>IIS</td>
        <td><button class="btn btn-sm btnD">Delete</button></td>
      </tr>
      <tr>
        <td>SQL</td>
        <td><button class="btn btn-sm btnD">Delete</button></td>
      </tr>
      <tr>
        <td>Windows File Share</td>
        <td><button class="btn btn-sm btnD">Delete</button></td>
      </tr>
      <tr>
        <td>Etc</td>
        <td><button class="btn btn-sm btnD">Delete</button></td>
      </tr>
    </tbody>
  </table>
</div>

Javascript:

     $(".eNew").on("click", function(event){

        $(".tAdd tbody").append(
          "<tr>" +
            "<td>New Selector</td>" +
            "<td><button class=\"btn btn-sm btnD\">Delete</button></td>" +
          "</tr>"
      );





    $(".tAdd tr").click(function() {
      $(".tAdd tr").removeAttr('class');
       $(this).toggleClass("table-active");
    });

此外，它也适用于原始 <tr>这是在 html 文件中，但由于某种原因，当我附加表格行时它不起作用。

Answer 1

这完全是由于动态内容未使用您声明的事件处理程序进行绑定(bind):

$(".eNew").on("click", function(event){

尽管这会在代码首次运行时绑定(bind)到所有 .eNew 元素，但新元素不会被绑定(bind)。

相反，绑定(bind)到文档并指定 .eNew 作为点击事件的选择器，它将起作用:

$(document).on("click", ".eNew", function(event){

编辑以下关于不起作用的OP评论

只是为了验证您的代码现在应如下所示:

$(document).on("click", ".eNew", function(event){
    $(".tAdd tbody").append(
        "<tr>" +
        "<td>New Selector</td>" +
        "<td><button class=\"btn btn-sm btnD\">Delete</button></td>" +
        "</tr>"
    );
});

$(document).on("click", ".tAdd tr", function(event){
    $(".tAdd tr").removeAttr('class');
        $(this).toggleClass("table-active");
});