如何访问动态插入的表行

Question

我的页面有一个包含两行的表格，如下所示：

<table class="table table-condensed">
  <tbody>
    <tr>
      <td class="col-sm-8 room-status" data-roomstatusid="1" data-value="Active" data-edited="false">Active</td>
      <td class="col-sm-4"><i class="fas fa-pencil-alt edit-status" style="font-size: 20px;"></i>
        <div class="edit-controls hidden"><i class="fas fa-times-circle cancel-status-edit" style="margin-left: 5px;font-size: 20px;"></i><i class="fas fa-save save-status-edit" style="margin-left: 15px;font-size: 20px;"></i>
        </div>
      </td>
    </tr>
    <tr id="status-template" class="hidden">
      <td class="col-sm-8 room-status" data-roomstatusid="-1" contenteditable="true"></td>
      <td class="col-sm-4"><i class="fas fa-pencil-alt edit-status hidden" style="font-size: 20px;"></i>
        <div class="edit-controls" data-mode="new"><i class="fas fa-times-circle cancel-status-edit" style="margin-left: 5px;font-size: 20px;"></i><i class="fas fa-save save-status-edit" style="margin-left: 15px;font-size: 20px;"></i>
        </div>
      </td>
    </tr>
  </tbody>
</table>

页面上有一个按钮，它使用隐藏的#status-template 行的 html 在表格的开头添加一行。一切正常。

添加新行后，我可以单击其上的铅笔图标或现在的第二行（第一个单元格中带有“活动”的行），并且检测点击的 javascript 工作正常。

如果我点击插入行的第一个 <td>，检测到该点击的 javascript 也可以正常工作，但如果我点击现在是第二行的第一个单元格（其中包含“活动”，点击未检测到。

我的 javascript 全部委托给 table 元素，因为我知道会有新元素添加到 DOM。

检测对一行的第一个<td> 的点击的javascript 如下所示

$('#room-status-table').on('click', 'tbody tr td:first', function() {
  if ($(this).hasClass('row-highlight')) {
    $(this).removeClass('row-highlight')
  } else {
    $('#room-status-table tbody tr').each(function() {
      $(this)
        .find('td:first')
        .removeClass('row-highlight')
    })
    $(this).addClass('row-highlight')
  }
})

检测铅笔图标点击的javascript是

$('#room-status-table').on('click', '.edit-status', function() {
  var cell = $(this).closest('tr').find('.room-status')
  $(cell).attr('contenteditable', 'true')
  $(cell).focus()
  $(this).addClass('hidden')
  $(this).next().removeClass('hidden')
  $(this).closest('tr').find('td:first').addClass('row-highlight')
})

创建新行的代码是

$("#new-status").on("click", function() {
  var html = "<tr>" + $("#status-template").html() + "</tr>"
  $("table > tbody > tr:first").before(html)
  $("table > tbody td:first").focus()
  $("#edit-room-submit").attr("disabled", "disabled")
})

感谢任何帮助找出为什么点击第二个<tr> 的第一个<td> 没有触发我的点击事件。

Answer 1

您误解了委托选择器td:first。您将要使用的是td:first-child。

虽然:first 仅匹配一个元素，但:first-child 选择器可以匹配多个元素，即每个父元素匹配一个。这相当于:nth-child(1)。

替换

.on('click', 'tbody tr td:first', ...)

与

.on('click', 'tbody tr td:first-child', ...)

Answer 2

我刚刚在我的项目中这样做了。我可以像一个例子一样分享我的代码，它在通过 ajax 添加的表格行上触发单击和双击：

$('table tbody').on('dblclick', 'tr', function(){
    if(!$(this).hasClass('tr.selected-row')){
        $(this).parent('tbody').find('tr.selected-row, td.selected-row').removeClass('selected-row');
        $(this).addClass('selected-row').find('td').addClass('selected-row');
        if($(this).find("td a[title='View']").length > 0){
            var href = $(this).find("a[title='View']").attr("href");
            if(href) {
                window.location = href;
            }
        } else if($(this).find("td a[title='Update']").length > 0){
            var href = $(this).find("a[title='Update']").attr("href");
            if(href) {
                window.location = href;
            }
        }

    }

}).on('click', 'tr', function(){
    if(!$(this).hasClass('tr.selected-row')){
        $(this).parent('tbody').find('tr.selected-row, td.selected-row').removeClass('selected-row');
        $(this).addClass('selected-row').find('td').addClass('selected-row');
    }
})