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");
    });

此外，它适用于html文件中的原始<tr>，但由于某些原因，当我追加表格行时，它不起作用。

Answer 1

这完全是由于以下事实：使用您声明的事件处理程序未绑定动态内容：

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

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

相反，绑定到文档并指定.eNew作为click事件的选择器，它将起作用：

$(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");
});

追加功能后如何修复表格行不被点击？

1 个答案: