当jQuery元素被附加到DOM时,触发OnAppend事件

Question

我写了一些代码来生成自定义控件.代码返回一个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;
}

Answer 1

要检测元素是否已添加到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/

希望能帮助到你