Dynamically added Dropdown-Buttons

Question

So I am using Materializecss a third-party library Materializecss: http://materializecss.com/

and I am trying to make a Dropdown when you click on a button. All works fine when I put the button manually in HTML and then click on it the Dropdown is working, but when I am adding dynamically rows and columns (in these columns are Cards) with buttons in it there is no action when I click on it.

This is the Example-Dropdown-Code:

<ul id='dropdown1' class='dropdown-content'>
   <li><a href="#!">one</a></li>
   <li><a href="#!">two</a></li>
   <li class="divider"></li>
   <li><a href="#!">three</a></li>
</ul>

And I add this when I receive the data from the server via ajax:

<div class="col s12 m6 l4">
  <div class="card hoverable">
    <div class="card-image waves-effect waves-block waves-light activator">
    </div>
    <div class="card-content">
      <a class="dropdown-button myPointer" data-activates="dropdown1"><i 
       class="material-icons right" >more_vert</i></a> 
. . .

after the loop I call

$(".dropdown-button").each(function(){
    $(this).dropdown();
});

because the documentation says that

Initialization for dropdowns is only necessary if you create them dynamically.

so I really don´t know why it is not working.

EDIT: this is how I add the HTML via JS(do not wonder about the variable names they are german-english):

for (var i = 0; i < data.length; i++) {
var link = data[i];
var linkHTML = '<div class="col s12 m6 l4" id="scroll'+link["linkid"]+'">\
                <div class="card hoverable" id="shadow'+link["linkid"]+'">\
                    <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;">\
                    </div>\
                    <div class="card-content">\
                      <span class="truncate card-title grey-text text-darken-4"><span class="colorPoints" style="color:' + link["color"] + ';"> •</span>' + link["title"] + ' <a class="dropdown-button" data-beloworigin="true" href="#" data-activates="dropdown1"><i class="material-icons right optionenButton myPointer" >more_vert</i></a>\
                      </span>\
                      <p class="truncate">' + link["description"] + '</p>\
                      <div class="truncate">\
                        <p>\
                            Kategorie: ' + link["categoryname"] + '\
                      </p>\
                      </div>\
                    </div>\
                    <div class="card-reveal">\
                      <span class="card-title grey-text text-darken-4">' + link["link"] + '<i class="material-icons right">close</i></span>\
                      <p>' + link["description"] + '</p>\
                    </div>\
                    <div class="card-action">\
                      <a href="' + link["link"] + '" target="_blank">Öffnen</a>\
                      <div class="right">\
                          <span class="material-icons thumbs" id="thumb_up_'+i+'" onclick="upVote('+link["linkid"]+','+i+');">thumb_up</span>\
                          <span class="thumb_number thumb_number_up" id="number_up_'+i+'">'+link["up"]+'</span>\
                          <span class="material-icons thumbs" id="thumb_down_'+i+'" onclick="downVote('+link["linkid"]+','+i+');">thumb_down</span>\
                          <span class="thumb_number" id="number_down_'+i+'">'+link["down"]+'</span>\
                      </div>\
                    </div>\
                </div>\
            </div>\
       ';
var currentContainer;
if ($( document ).width()<=992 && i % 2 == 0) {

    $('#mainContainer').append('<div class="row" id="cont' + i + '"></div>');
    currentContainer = i;
}else if ($( document ).width()>992 && i % 3 == 0){
    $('#mainContainer').append('<div class="row" id="cont' + i + '"></div>');
    currentContainer = i;
}
$('#cont' + currentContainer).append(linkHTML);

 }

Answer 1

I wrote my own function:

<i class="material-icons right myPointer" id="pos2" onclick="openOptions(2);">more_vert</i>

<ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">three</a></li>
</ul>

<script>
    function openDropdown(id) {
        var top = ($("#pos"+id).offset().top) + 20;
        var left = ($("#pos"+id).offset().left) -70;

        $("#dropdown1").css({top:top,left:left});
        $("#dropdown1").slideToggle();
    }
</script>