Question

所以我使用Materialisecss作为第三方库 Materialisecss：http://materializecss.com/

我点击按钮时尝试制作Dropdown。当我手动将按钮放在HTML中然后点击它Dropdown正在工作时，一切正常，但是当我动态添加行和列（在这些列中为Cards）时，其中有按钮点击它时没有动作。

这是示例 - 下拉代码：

<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>

当我通过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> 
. . .

循环之后

我打电话

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

因为文档说明了

只有在动态创建下拉列表时才需要初始化。

所以我真的不知道它为什么不起作用。

编辑：这是我通过JS添加HTML的方式（不要怀疑它们是德语 - 英语的变量名称）：

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

我已经创建了一些模拟您需要的功能的片段，一切正常。您的浏览器中的JavaScript控制台是否有任何错误？

＆＃13;

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

＆＃13;

Answer 2

我写了自己的函数：

<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>

动态添加Dropdown-Buttons

2 个答案: