javascript - mousedown 事件不适用于动态添加的元素

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 3 年前。

有没有办法在动态添加的元素上使用 mousedown 事件

$(function() {
  var isMouseDown = false,
    isHighlighted;
  //$('#our_table').on('mousedown', 'tr', function (event) {
  $("#myTable tr").mousedown(function() {
    isMouseDown = true;
    $(this).toggleClass("highlighted");
    isHighlighted = $(this).hasClass("highlighted");
    return false; // prevent text selection
  }).mouseover(function() {
    if (isMouseDown) {
      $(this).toggleClass("highlighted", isHighlighted);
    }
  }).bind("selectstart", function() {
    return false;
  })
  $(document).mouseup(function() {
    isMouseDown = false;
  });
});

function addRow() {
  var arrTables = document.getElementById('myTable');
  var oRows = arrTables.rows;
  var numRows = oRows.length;

  var newRow = document.getElementById('myTable').insertRow(numRows);
  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  var cell3 = newRow.insertCell(2);

  cell1.innerHTML = numRows;
  cell2.innerHTML = numRows;
  cell3.innerHTML = numRows;
}

table td {
  width: 100px;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  background-color: #ccc;
  border: 1px solid #fff;
}

table tr.highlighted td {
  background-color: #999;
}

body {
  user-select: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" id="myTable">
  <tr>
    <td>0</td>
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>
</table>
<button onclick="addRow()">Add Row</button>

Answer 1

您必须将事件委托(delegate)设置为 body 元素，然后将 event.target 与您想要触发操作的元素相匹配。

您可以检查此启动，仅针对 mousedown 方法更新了您的 fiddle : http://jsfiddle.net/Len7csa0/