Calling $(document).foundation(); multiple times in Foundation


I’m using Foundation for the first time and using it inside an existing Angular Dart application.

Is it fine to call $(document).foundation(); more than once?

In my JS, I have the following:

document.addEventListener("onFoundationify", function(event){

and then inside my Angular component’s Dart code, I call

ngAfterContentInit() {
    document.dispatchEvent(new CustomEvent("onFoundationify"));

So every Dart component fires this event on ngAfterContentInit which then calls $(document).foundation();

Is there a better way to foundationify an Angular Dart component that just appeared in the DOM or is what I’m doing fine / safe ?


This seems to be a cleaner way:

Angular Dart:

ngAfterContentInit() {
    new Future.delayed(Duration.ZERO, (){
        document.dispatchEvent(new CustomEvent("onSetupAccordian"));


<script type="text/javascript">
    document.addEventListener("onSetupAccordian", function (event) {
        new Foundation.Accordion($("element-id-from-event"), {});

This explicitly sets up the specific accordian instead of re-wiring everything.

Answered By – Jan Vladimir Mostert

Answer Checked By – Marilyn (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *