jQuery по вопросам () / living ()

Question

Я изучал jQuery в эти времена.Почему-то у меня возникла проблема с использованием on(event, [selectors], handler) в jQuery.Я хочу прикрепить событие к некоторым живым элементам (может быть добавлено к дереву позже), и я нашел два способа (в 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.Но «ванильный путь» кажется немного неудобным (я должен вызывать 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.