有没有办法在动态添加的元素上使用 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>
最佳答案
您必须将事件委托(delegate)设置为 body
元素,然后将 event.target 与您想要触发操作的元素相匹配。
您可以检查此启动,仅针对 mousedown 方法更新了您的 fiddle : http://jsfiddle.net/Len7csa0/
关于javascript - mousedown 事件不适用于动态添加的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58753454/