2

我写了一些代码来生成自定义控件。代码返回一个 jQuery 元素，调用者将此 jQuery 元素附加到 DOM。我将自定义滚动条应用于生成器代码中的控件，但由于元素尚未附加到 DOM，因此它没有被应用。

我的问题：是否有任何 onAppend 事件或类似的事件，以便我在将元素附加到 DOM 时应用自定义滚动条？

生成器的示例代码：

function getControl(controlParams){
    var $control = $('<div/>');
    $control.applyCustomScrollBar(); //Not appended to DOM yet, so doesnt work
    return $control;
}

消费者示例代码：

var $control = getControl(controlParams);
$("body").append($control); //Appending to DOM now

想做类似的事情：

function getControl(controlParams){
    var $control = $('<div/>');
    $control.onAppend(function(){
        $(this).applyCustomScrollBar();
    });

    return $control;
}
4

2 回答 2

6

要检测元素是否已添加到 DOM，您需要触发自定义事件，请尝试以下操作：

$("body").on("appened", "div", function(event){
    //event after append the element into DOM, do anything
    $(this).css("background", "blue");
});

$("<div/>", {
    id: "some-control",
    text: 'Example Control'
}).appendTo("body").trigger("appened");​

小提琴示例：http: //jsfiddle.net/uudDj/1/

希望能帮助到你

于 2012-12-21T12:20:15.410 回答
2

你可以在没有 jquery 的情况下做到这一点MutationObserver

MutationObserver为开发人员提供了一种对 DOM 中的更改做出反应的方法。它旨在替代 DOM3 事件规范中定义的突变事件。

// select the target node
var target = document.getElementById('some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
observer.disconnect();

来源： devdocs.io，取自这篇博文

于 2016-11-01T21:17:27.323 回答