javascript - JQuery 一旦创建就附加到父级

Question

我想在创建 e 后立即使用 $(e).append()。

我知道我可以使用它: setTimeout(/*func 检查父项是否存在*/, 100) 但我发现这是一个非常糟糕的主意。是否存在某种 DOM 事件，当 DOM 元素的子树被修改时会触发？

我通常只是将其粘贴到源代码中，粘贴到创建父级的函数中，但这实际上是不可能的，部分原因是我实际上正在制作一个 Chrome 扩展。

感谢您的帮助

Answer 1

我将使用这个库来等待元素存在 Arrive.js

// watch for creation of an element which satisfies the selector ".test-elem"
$(document).arrive(".test-elem", function() {
    // 'this' refers to the newly created element
    var $newElem = $(this);
});

// the above event would watch for creation of element in whole document
// it's better to be more specific whenever possible, for example
$(".container-1").arrive(".test-elem", function() {
    var $newElem = $(this);
});

正如您所看到的，它非常易于使用。如果您不想使用外部库，则需要查看 JS 中的 MutationObserver，因为 DOMNodeInserted 已被弃用。

解除库的绑定(bind)很容易，如文档所示:

// unbind all arrive events on document element
$(document).unbindArrive();

// unbind all arrive events on document element which are watching for ".test-elem" selector
$(document).unbindArrive(".test-elem");

// unbind only a specific callback
$(document).unbindArrive(callbackFunc);

// unbind only a specific callback on ".test-elem" selector
$(document).unbindArrive(".test-elem", callbackFunc);

// unbind all arrive events
Arrive.unbindAllArrive();