javascript - jQuery on()/living() 问题

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 很容易实现我想要的。但是“ Vanilla 方式”似乎有点不方便(我每次操作 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 层次结构该级别的元素。