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>

Answer 2

I've created some snippet simulating functional you need and everything works fine. Have you any errors in JavaScript console in your browser?

<!DOCTYPE html>
<html>
<head>
	<title></title>
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
</head>
<body>
<button id="adddropdown">Add dropdown button</button>
<!-- Dropdown Trigger -->
  <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

  <!-- Dropdown Structure -->
  <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>

  <ul id='empty-dropdown' class='dropdown-content'>
  </ul>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
   <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
  <script>
    $("#adddropdown").bind('click', function(){
      $('body').append("<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>");
      $(".dropdown-button").each(function(){
        $(this).dropdown();
      });
    })
  </script>
</body>
</html>