title: Can not get Materialize css dropdown to work with dynamically loaded modal
body: <p>I have a Rails application running with MaterializeCSS. I am generally using materialize many places in the app including JS objects (like FAB buttons) and it all works fine...except for the dropdown button.</p>
  
  <p>I have this one section of code where I load a <a href="http://materializecss.com/modals.html" rel="nofollow noreferrer">modal form</a> on the modal form I have two  materializecss components which requires JS: 1) a collapsible list and 2) a dropdown. The collapsible list works fine, but the dropdown does not.</p>
  
  <p>The following code makes it run (or not :-( ). I'm using coffeescript and haml:</p>
  
  <p>this initializes the modal: </p>
  
  <pre><code>modalInit: () -&gt;
    $('#photo-modal').modal
      dismissible: true
      opacity: .5
      in_duration: 300
      out_duration: 200
      starting_top: '4%'
      ending_top: '10%'
      ready: (modal, trigger) -&gt;
        App.PhotoTaginput.refresh()
        $('.collapsible').collapsible();
        $('.dropdown-button').dropdown();
  </code></pre>
  
  <p>Note that the collapsible and the dropdown are initialized in the same way!!</p>
  
  <p>I load the modal with this script:</p>
  
  <pre><code>showModal: (element) -&gt;
    _this = this
    photoId = $(element).parents('.photo-widget').data("photoid")
    url = '/photos/' + photoId + '?view=modal'
    $('#photo-modal &gt; .modal-content').load url, (result) -&gt;
      $('#photo-modal').modal('open');
  </code></pre>
  
  <p>This fetches some HTML which looks like this:</p>
  
  <pre><code>.row
    .image_info#photo_id{:photo_id=&gt;@photo.id, "data-photo_id"=&gt;@photo.id}
      .col.l5
        .modal-toolbar
          %a.waves-effect.waves-light.btn.like{:type =&gt; "button", :class=&gt;current_user.voted_for?(@photo) &amp;&amp; "red"}
            %i.fa.fa-thumbs-o-up
          %a.dropdown-button.btn{"data-activates" =&gt; "dropdown1", :href =&gt; "#"} Drop Me!
          %ul#dropdown1.dropdown-content
            %li
              %a{:href =&gt; "#!"} one
            %li
              %a{:href =&gt; "#!"} two
            %li.divider
            %li
              %a{:href =&gt; "#!"} three
  
      .col.l12#modal_image
        %img.bg.responsive-img{:src =&gt; "#{@photo.url('org')}"}
  
  
  
      %ul.collapsible.overlay-menu.overlay-menu-show{"data-collapsible"=&gt;"accordion"}
        %li
          .collapsible-header.overlay-menu-header
            %i.material-icons info
            info
          .overlay-menu-body.collapsible-body
            %table
              %tbody
                %tr
                  %td Date
                  %td=@photo.date_taken_formatted
                %tr
                  %td ID
                  %td=@photo.id
                %tr
                  %td Country
                  %td=@photo.location.country
                %tr
                  %td Model
                  %td=@photo.model
                %tr
                  %td Make
                  %td=@photo.make
  </code></pre>
  
  <p>It must have something to do with the JS which dynamically should initialize the dropdown. I say this because I can see that the css on the  of the dropdown does not change when I press the button. It's kind of wierd though cause it is initialized the same way as the collapsible.</p>
  
  <p>I'm pretty sure that the jquery and materialize libs are loaded correctly. I'm already using both libs in other code sections throughput the application  </p>