Question

这些时候我一直在学习jQuery。不知何故，我在jQuery中使用<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>时遇到了问题。我想将一个事件附加到一些生命元素（可能后来被添加到树中），我发现了两种方法（在jQuery和vanilla JS中）来实现这一点。

livingClick()

这是我的HTML代码，使用jQuery和vanilla JS很容易实现我想要的。但“香草方式”似乎有点不方便（我必须调用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();每次操纵dom树）。

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

我很奇怪 jQuery如何以这么简单的方式实现这一目标

Mutation Observer

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

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层次结构中该元素的元素。

jQuery on（）/ living（）问题

1 个答案: