I wrote some code to generate custom controls. The code returns a jQuery element and the caller appends this jQuery element to the DOM. I apply a custom scrollbar to the control in the generator code, but it doesn't get applied as the element has not been appended to the DOM yet.
My question: Is there any onAppend event or something like that, so that I apply the custom scrollbar at the time when the element has been appended to the DOM?
Sample code for generator:
function getControl(controlParams){
var $control = $('<div/>');
$control.applyCustomScrollBar(); //Not appended to DOM yet, so doesnt work
return $control;
}
Sample code for consumer:
var $control = getControl(controlParams);
$("body").append($control); //Appending to DOM now
Want to do something like:
function getControl(controlParams){
var $control = $('<div/>');
$control.onAppend(function(){
$(this).applyCustomScrollBar();
});
return $control;
}
I wrote some code to generate custom controls. The code returns a jQuery element and the caller appends this jQuery element to the DOM. I apply a custom scrollbar to the control in the generator code, but it doesn't get applied as the element has not been appended to the DOM yet.
My question: Is there any onAppend event or something like that, so that I apply the custom scrollbar at the time when the element has been appended to the DOM?
Sample code for generator:
function getControl(controlParams){
var $control = $('<div/>');
$control.applyCustomScrollBar(); //Not appended to DOM yet, so doesnt work
return $control;
}
Sample code for consumer:
var $control = getControl(controlParams);
$("body").append($control); //Appending to DOM now
Want to do something like:
function getControl(controlParams){
var $control = $('<div/>');
$control.onAppend(function(){
$(this).applyCustomScrollBar();
});
return $control;
}
- 1 Afaik, there is no such event. There are mutation events that fire on changes in the DOM, but if you have control over the code you could just create a custom event and trigger it everytime you append an element yourself, as that would be a lot easier, and cross browser. – adeneo Commented Dec 21, 2012 at 10:18
- 1 DOM mutation events would be one way to achieve this, but you'd be better off simply creating your own custom event and (assuming you're building this with some kind of external API) exposing it for use. – Graham Commented Dec 21, 2012 at 10:19
- @adeneo: That would not be an option. There can be tonnes of consumers. So I cant tell the consumers to fire events all the time. Another idea that came to my mind just now is to modify the jquery append method to fire this event. But again this looks messy. Ill have to update jquery file for this event every time I take an update. – pickhunter Commented Dec 21, 2012 at 10:21
- As appending is synchronous, there really is no built in event or callback for that, and normally you would'nt need one if you structured your code to do things in the right order! – adeneo Commented Dec 21, 2012 at 10:30
2 Answers
Reset to default 6To detect if element has been added to the DOM, you need to trigger a custom event, try this:
$("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");
Fiddle example: http://jsfiddle/uudDj/1/
Hope it helps
You can do that without jquery with MutationObserver
MutationObserverprovides developers a way to react to changes in a DOM. It is designed as a replacement for Mutation Events defined in the DOM3 Events specification.
// 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();
source : devdocs.io that took it from This blog post