title: Dynamically added Dropdown-Buttons
body: <p>So I am using Materializecss a third-party library
  Materializecss: <a href="http://materializecss.com/" rel="nofollow">http://materializecss.com/</a></p>
  
  <p>and I am trying to make a <code>Dropdown</code> when you click on a button.
  All works fine when I put the button manually in HTML and then click on it the <code>Dropdown</code> is working, but when I am adding dynamically rows and columns (in these columns are <code>Cards</code>) with buttons in it there is no action when I click on it.</p>
  
  <p>This is the Example-Dropdown-Code:</p>
  
  <pre><code>&lt;ul id='dropdown1' class='dropdown-content'&gt;
     &lt;li&gt;&lt;a href="#!"&gt;one&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#!"&gt;two&lt;/a&gt;&lt;/li&gt;
     &lt;li class="divider"&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#!"&gt;three&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And I add this when I receive the data from the server via <code>ajax</code>:</p>
  
  <pre><code>&lt;div class="col s12 m6 l4"&gt;
    &lt;div class="card hoverable"&gt;
      &lt;div class="card-image waves-effect waves-block waves-light activator"&gt;
      &lt;/div&gt;
      &lt;div class="card-content"&gt;
        &lt;a class="dropdown-button myPointer" data-activates="dropdown1"&gt;&lt;i 
         class="material-icons right" &gt;more_vert&lt;/i&gt;&lt;/a&gt; 
  . . .
  </code></pre>
  
  <p>after the loop I call</p>
  
  <pre><code>$(".dropdown-button").each(function(){
      $(this).dropdown();
  });
  </code></pre>
  
  <p>because the documentation says that</p>
  
  <blockquote>
    <p>Initialization for dropdowns is only necessary if you create them dynamically.</p>
  </blockquote>
  
  <p>so I really don´t know why it is not working.</p>
  
  <p>EDIT:
  this is how I add the HTML via JS(do not wonder about the variable names they are german-english):</p>
  
  <pre><code>for (var i = 0; i &lt; data.length; i++) {
  var link = data[i];
  var linkHTML = '&lt;div class="col s12 m6 l4" id="scroll'+link["linkid"]+'"&gt;\
                  &lt;div class="card hoverable" id="shadow'+link["linkid"]+'"&gt;\
                      &lt;div class="card-image waves-effect waves-block waves-light activator" style="height: 300px;background: url('+ link["picture"] +') no-repeat;background-position: center center; background-size: cover;"&gt;\
                      &lt;/div&gt;\
                      &lt;div class="card-content"&gt;\
                        &lt;span class="truncate card-title grey-text text-darken-4"&gt;&lt;span class="colorPoints" style="color:' + link["color"] + ';"&gt; •&lt;/span&gt;' + link["title"] + ' &lt;a class="dropdown-button" data-beloworigin="true" href="#" data-activates="dropdown1"&gt;&lt;i class="material-icons right optionenButton myPointer" &gt;more_vert&lt;/i&gt;&lt;/a&gt;\
                        &lt;/span&gt;\
                        &lt;p class="truncate"&gt;' + link["description"] + '&lt;/p&gt;\
                        &lt;div class="truncate"&gt;\
                          &lt;p&gt;\
                              Kategorie: ' + link["categoryname"] + '\
                        &lt;/p&gt;\
                        &lt;/div&gt;\
                      &lt;/div&gt;\
                      &lt;div class="card-reveal"&gt;\
                        &lt;span class="card-title grey-text text-darken-4"&gt;' + link["link"] + '&lt;i class="material-icons right"&gt;close&lt;/i&gt;&lt;/span&gt;\
                        &lt;p&gt;' + link["description"] + '&lt;/p&gt;\
                      &lt;/div&gt;\
                      &lt;div class="card-action"&gt;\
                        &lt;a href="' + link["link"] + '" target="_blank"&gt;Öffnen&lt;/a&gt;\
                        &lt;div class="right"&gt;\
                            &lt;span class="material-icons thumbs" id="thumb_up_'+i+'" onclick="upVote('+link["linkid"]+','+i+');"&gt;thumb_up&lt;/span&gt;\
                            &lt;span class="thumb_number thumb_number_up" id="number_up_'+i+'"&gt;'+link["up"]+'&lt;/span&gt;\
                            &lt;span class="material-icons thumbs" id="thumb_down_'+i+'" onclick="downVote('+link["linkid"]+','+i+');"&gt;thumb_down&lt;/span&gt;\
                            &lt;span class="thumb_number" id="number_down_'+i+'"&gt;'+link["down"]+'&lt;/span&gt;\
                        &lt;/div&gt;\
                      &lt;/div&gt;\
                  &lt;/div&gt;\
              &lt;/div&gt;\
         ';
  var currentContainer;
  if ($( document ).width()&lt;=992 &amp;&amp; i % 2 == 0) {
  
      $('#mainContainer').append('&lt;div class="row" id="cont' + i + '"&gt;&lt;/div&gt;');
      currentContainer = i;
  }else if ($( document ).width()&gt;992 &amp;&amp; i % 3 == 0){
      $('#mainContainer').append('&lt;div class="row" id="cont' + i + '"&gt;&lt;/div&gt;');
      currentContainer = i;
  }
  $('#cont' + currentContainer).append(linkHTML);
  
   }
  </code></pre>