Question

我有一个事件处理程序，当UL附加或删除子LI时运行。

在追加的情况下，回调是在追加元素之后，这就是我想要的。

但是，在删除的情况下，在删除元素之前执行回调。这意味着在删除元素后，回调只能访问旧的UL而不是新的UL。

我在回调中输出了UL，在删除元素之前确实是UL。我想要在删除元素后回调与UL一起工作。人们可以在输出的列表长度中看到这一点的证据。

HTML：

<ul id="myList">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

<button id="removeButton">Remove Element</button>
<button id="appendButton">Append Element</button>

使用Javascript：

$(document).ready(function() {
    // removes the last element
    $("#removeButton").click(function() {
        var items = $("#myList").children();
        var lastIndex = items.length - 1;
        if (lastIndex < 0) {
            alert("nothing to remove");
        } else {
            items.eq(lastIndex).remove();
        } 
    });

    // append a list item
    $("#appendButton").click(function() {
        var itemNumber = $("#myList").children().length;
        var ch = String.fromCharCode(97 + itemNumber);

        $("#myList").append("<li>" + ch + "</li>");
    });

    // event handler when the list is changed
    // element not removed until AFTER this callback executed, how can
    // suppress execution of this callback until after element removed
    $(document.getElementById("myList")).bind("DOMNodeInserted DOMNodeRemoved", function() {

        alert("Num Children : " + $(this).children().length);

    });

Answer 1

DOMNodeRemoved确实在删除之前被解雇了。但是，这不是一件坏事，因为您可以从event.target获取要删除的元素。

$(document.getElementById("myList")).bind("DOMNodeInserted DOMNodeRemoved", function(e) {
    console.log(e.target);
});

Answer 2

在脚本要删除项目之前触发DOMNodeRemoved。阅读官方说明：

w3c.org（你必须向下滚动一下）：

引用：

DOMNodeRemoved 从其父节点中删除节点时触发。 在从树中删除节点之前调度此事件。此事件的目标是要删除的节点。

    Bubbles: Yes
    Cancelable: No
    Context Info: relatedNode holds the parent node

正如 Fabricator 在我完成帖子（;）之前写的那样，event.target可以帮助你获取被删除的项目。

jQuery删除/追加事件处理程序回调

2 个答案: