Question

我有一个表，该表由我自己在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

实际上，哪一部分内容仅适用于.click

哪些内容是动态的，您还要处理哪个单击，然后单击使用文件

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

而不是在上方使用点击事件，

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

jQuery'On'方法不适用于表上的动态附加行

1 个答案: