Is there a “element ready” event when a HTML element is inserted into DOM?

Question

I am using Backbone View to render some widgets, and they are inserted into the DOM after being rendered as a standalone element. While some plugins/widgets work when the element is still 'in the mid air', others require the element to be part of DOM to function properly. For instance, in the backbone view's render method, I need to call:

$("#images").slimScroll(); //slimScroll is a jquery plugin that add custom scrollbar 

But this doesn't work. It works only after the Backbone View element is in the DOM, now my workaround is to call the plugin method after inserting widget to DOM, but this is very inflexible. So I need an event when an element is rendered in the DOM, something like document.ready but triggered when the element is ready in document. Is there such an event? Or what is the best way to deal with such situation?

Answer 1

Nothing about Ajax will intrinsically cause DOM updates.

If there is a DOM update as a result of some Ajax stuff, it is because an event handler function has modified the DOM.

Just put your code after the DOM modification code in that event handler.

That said, you can watch for changes to the DOM with a mutation observer in supported browsers .

Answer 2

You have to find elements in the scope of your view. Like this:

this.$("#images").slimScroll();

But I guess it wouldn't work because plugin requires element to be added to the DOM to calculate width, height, offset etc.

Answer 3

您可以使用ajaxStart ，它将在发出Ajax请求时触发。