Checkboxes added to the dom after bootstrapMaterialDesign() don't show

[mathiasleroy]

Test Case

https://codepen.io/Tardigrad/pen/jodXxX?editors=1011

Summary

Checkboxes can only be initialized once with the function $('body').bootstrapMaterialDesign();

All checkboxes that are added after this function runs, are not initialized. And don't show properly.

I'm adding checkboxes using vuejs2 in this codepen.

(Using Chrome Version 74.0.3729.169 (Official Build) (64-bit))

Expected result

Working checkboxes for checkboxes created after bootstrapMaterialDesign() (i.e.: Checkbox6 to 9), like checkbox1 to 5

Additional Information

My guess is that bootstrapMaterialDesign() doesn't listen to future DOM changes.
I think a solution might be to modify bootstrapMaterialDesign() to reset checkboxes before executing.
This might allow it to run it multiple times?

[FezVrasta]

Please refer to the documentation, it is explained how to use Arrive.js for this purpose

[mathiasleroy]

From the docs:

If you use Material Design for Bootstrap on a project handled by Angular, React or other frameworks that dynamically generate and append new elements to the document, you’ll need to manually call the Material Design for Bootstrap javascript functions to initialize new elements such as inputs. Alternatively, you can include arrive.js before the MDB javascript to automatically initialize any dynamically generated element.

The codepen does use arrive.js before the MDB javascript (cf. line 57)

How is that wrong?
Can you please explain more?
I cannot find out from the documentation what else should be done.

you’ll need to manually call the Material Design for Bootstrap javascript functions to initialize new elements such as inputs

This means running $('body').bootstrapMaterialDesign({});, right ?

@FezVrasta

[FezVrasta]

You were just importing the dependencies in the wrong way, CodePen requires you to define the dependencies in the "JavaScript" tab settings

https://codepen.io/anon/pen/WBPmyO?editors=1011

[mathiasleroy]

Thank you very much for finding that @FezVrasta

I still think there might a bug, since it was still not working on my website, I investigated further...

Adding a single switch to the page breaks it again.

see https://codepen.io/Tardigrad/pen/zQbMYd?editors=1011

(I took your working codepen and added only this, in the html) :

  <div class="switch">
    <label>
      <input type="checkbox"> Wi-Fi
    </label>
  </div>

Am I still doing wrong?

EDIT: And I confirm that removing all the 5 switches from the bigger website I'm building solves the issue. (removing all class="switch )

[NicolasPerego]

Any news on this issue?