Binding ZURB Foundation dropdown plugin to dynamically-inserted element

Question

I have some client-side JavaScript that dynamically inserts some elements into the DOM. Those elements contain the markup for a dropdown element using the Dropdown plugin :

<p>
  <a
    id="resource-upload-label-1234"
    href="#invalid-resource-1234"
    class="label alert"
    data-dropdown="invalid-resource-1234"
    data-options="is_hover:true"
  >
    Invalid
  </a>
</p>
<div id="invalid-resource-1234" class="f-dropdown content" data-dropdown-content>
  <h4>Invalid File</h4>
  <p>
    This file is not a supported file type.
  </p>
</div>

The problem is that the dropdown plugin isn't detecting this new element, so it is not adding the dropdown behaviors to the new elements.

As a test, I tried hard-coding the HTML directly in the HTML source, and the dropdown loads fine in that context. So I have Foundation and the dropdown plugin configured correctly. It's just not binding the functionality to the dynamically-generated elements.

Is there a bit of JavaScript that I can run to bind the dropdown functionality to #resource-upload-label-1234 ? I was looking at the source for the plugin, and it wasn't evident to me how to do this.

Answer 1

For efficiency you can use $(document).foundation('reflow');

To be even more efficient "target the actual type of foundation item you need to 'reflow' $(document).foundation('orbit', 'reflow');"

(I'm quoting from: http://foundation.zurb.com/forum/posts/1766-reflow )

Answer 2

One solution that I just found that works is to call $(document).foundation(); again after inserting the new elements.

I am not sure if this is the "right way," but it works. If anyone knows of a more appropriate solution, don't be shy, and post it as an answer!

According to a comment on zurb/foundation#3885 , it appears that calling foundation() again should not cause any problems, and perhaps foundation() is designed to be used this way.