Initialize jquery plugin on dynamic elements

Question

I have this code

$(".address-geocomplete").geocomplete({
    country: "US",
    details: ".details",
    detailsAttribute: "data-geo"
});

It works with no problem when the elements were loaded with the document but it doesn't work when the element is called with ajax. I understand I could add the function to the ajax call but that's what I don't want. I would want to write this function once and for it to work no matter if the element was called on the document load or in ajax. Is that possible to do? How? Thanks

Possible duplicate of [In jQuery, how to attach events to dynamic html elements?](http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements) — Rob Louie, Jun 27 '16 at 15:12
@RobLouie Definitely not a duplicate. OP is trying to call a jQuery function on an element, not attach an event listener — mhodges, Jun 27 '16 at 15:13
You might be able to do something like http://stackoverflow.com/a/28311912/4987197 and use a mutation observer and call .geocomplete() in that event handler. Although, that's not much different than just adding it to your ajax callback.. What is your reasoning for not putting it in the callback, if you don't mind me asking? — mhodges, Jun 27 '16 at 15:19
@mhodges I just really don't want to duplicate the code and I have to do similar things in my application with different plugins and different ajax calls. Just trying to find a way for my code to be easier to maintain. Will check out the link — raygo, Jun 27 '16 at 15:23
I see your point. Yeah, unfortunately, if you're not using event handlers, it is very difficult to dynamically handle DOM nodes. This is where a framework like angularjs comes in handy. You can create a custom directive for your geocomplete elements, and it will call .geocomplete() whenever the DOM node is added to the DOM - I do this for autocomplete, datepickers, and a few custom jQuery extensions that I have written myself - it does a fantastic job with stuff like this — mhodges, Jun 27 '16 at 15:28
You can put this inside a function and call this function after your elements are being loaded with ajax. — ammu, Jun 27 '16 at 15:32
@ammu That doesn't address the root of the problem, which is that raygo does not want a bunch of function calls in various places. The goal is to have a single event handler for any time that node gets added to the DOM - for maintainability purposes, as mentioned in a previous comment — mhodges, Jun 27 '16 at 15:41
Possible duplicate of [jQuery "on create" event for dynamically-created elements](https://stackoverflow.com/questions/15268661/jquery-on-create-event-for-dynamically-created-elements) — Mike Doe, Oct 08 '19 at 12:43

score 0 · Answer 1 · answered Jun 27 '16 at 21:30

Use MutationObserver. You can use it to detect additions to the DOM. Watch the element to which the children are added, filter out the new child elements with class address-geocomplete and run your jQuery code on them.

MutationObserver does not work on old IE versions (10 and older).

Initialize jquery plugin on dynamic elements

1 Answers1