jQuery on() / living() issues

Question

这些时候我一直在学习jQuery。不知何故，我在jQuery中使用on(event, [selectors], handler)时遇到了问题。 我想将一个事件附加到一些有生命的元素(也许稍后附加到树上(，我找到了两种方法(在jQuery和vanilla JS中(来实现这一点。

<table>
<tr>
<th>
<label>
<input type="checkbox"  id="s-all" autocomplete="off">
Select All
</label>
</th>
<th>INFO</th>
<th>PRICE</th>
<th>AMOUNT</th>
<th>Manu</th>
</tr>
<tr>
<td><input type="checkbox" name="is-checked" autocomplete="off"></td>
<td><img src="image/img.jpg" alt="222"><a href="#">Umbrella</a></td>
<td>$100</td>
<td>
<input type="button" class="minus" value="-">
<input type="text" disabled value="1" autocomplete="off">
<input type="button" class="add" value="+">
</td>
<td><a href="#" class="delete">Delete</a></td>
</tr>
<tr>
<td><input type="checkbox" name="is-checked" autocomplete="off"></td>
<td>
<img src="image/img.jpg" alt="222"><a href="#">fake umbrella</a>
</td>
<td>$1</td>
<td>
<input type="button" class="minus" value="-">
<input type="text" disabled value="1" autocomplete="off">
<input type="button" class="add" value="+">
</td>
<td><a href="#" class="delete">Delete</a></td>
</tr>
</table>
<button id="add-item">Add one</button>

这是我的HTML代码，使用jQuery和vanilla JS很容易实现我想要的东西。但是"香草方式"似乎有点不方便(每次作 dom 树时我都必须调用livingClick()(。

var del = document.getElementsByClassName( "delete" );
document.getElementById( "add-item" ).onclick = function() {
var copy = document.querySelectorAll( "tr" )[1].cloneNode( true );
document.getElementsByTagName( "table" )[0].children[0].appendChild( copy );
console.log(  copy );
livingClick();
};
function livingClick() {
for( var i = 0; i < del.length; i++) {
del[i].onclick = function() {
var that = this.parentElement.parentElement;
that.parentElement.removeChild( that );
};
}
}
livingClick();

我想知道jQuery是如何以如此简单的方式实现这一点的

。

$( "tbody" ).on( 'click', ".delete", function(e) {
$( this ).parent().parent().remove();
});

我也知道有Mutation Observer可以检测到 DOM 树的变化，但它自 2015 年以来就没有更新过(这是真的吗？(，而 jQuery 已经弃用了live()很长时间。 谁能帮我解决这个问题？

Answer 1

当你写的时候

$( "tbody" ).on( 'click', ".delete", function(e) {
$( this ).parent().parent().remove();
});

jQuery将其视为编写：

$( "tbody" ).on( 'click', function(e) {
if ($(e.target).is(".delete")) {
(function(e) {
$( this).parent().parent().remove();
).bind(e.target)(e);
}
});

这利用了事件冒泡。当你点击tbody的后代时，事件从该元素冒泡到tbody，在冒泡e.target的每一步都是DOM层次结构中该级别的元素。