加载动态生成的按钮时不显示下拉内容

Question

我有一个关于 MaterializeCSS 的问题。 我有一个 html 表，它有一个选项按钮，可以显示基于用户生成的动态选项。

这在第一次运行时（加载页面时）一切正常，但是当我使用 AJAX 重新加载表格内容（包括按钮）时，下拉内容将不再显示。虽然按钮点击事件仍然被触发。

我尝试了多种解决方案，但这些都不适用于我的情况。

表格（php中foreach循环生成的tbody内容）：

<table class="table highlight">
<thead>
<tr>
    <th class="center-align">
        <input type="checkbox" id="checkAllUsers" class="checkToggle checkAllUsers"
               data-target="#boxUsers table tbody [type=checkbox]">
        <label for="checkAllUsers"></label>
    </th>
    <th>Username</th>
    <th class="hide-on-small-only">Email</th>
    <th style="text-align:center;" class="hide-on-small-only">Allowed</th>
    <th style="text-align:center;">Employee</th>
    <th>Action</th>
</tr>
</thead>
<tbody class="usertablebody">
  <tr>
      <td class="center-align">
          <input type="checkbox" class="selectedUsers" name="u-1" id="u-1">
          <label for="u-1"></label>
      </td>
      <td>jGeluk</td>
      <td class="hide-on-small-only">jonah@example.com</td>
      <td style="text-align:center;">Yes</td>

      <td style="text-align:center;">No</td>
      <!-- ACTION BUTTON HERE -->
      <td>
          <div class="actions">
              <a class="dropdown-button showuseroptions btn-flat waves-effect" uid="1" href="#"
                 data-activates="showUserOptions">
                  <i class="large material-icons">more_vert</i>
              </a>
          </div>
      </td>
  </tr>
</tbody>

下拉内容：

<ul id="showUserOptions" class="dropdown-content main-dropdown lighten-2">
    <li><a href="#">Loading...</a></li>
</ul>

加载动态下拉内容（这在页面加载时运行没有任何问题）：

$("body").on('click', ".showuseroptions", function(event) {
var uid = $(this).attr('uid');
var btn = this;;
toggleLoader();
jQuery.ajax({
    type: "POST",
    url: base_url + "ajax_admin_controller/fetch_user_options",
    dataType: 'text',
    data: {uid:uid},
    success: function(res) {
        if (res)
        {
            //"ul#showUserOptions"
            $("ul#showUserOptions").html(res);
        }
        toggleLoader();
    }
});


});

刷新表格功能：

function refreshUserTable()
{
    toggleLoader();
    jQuery.ajax({
        type: "POST",
        url: base_url + "ajax_admin_controller/fetch_users_table",
        dataType: 'text',
        success: function(res) {
            if (res)
            {
                $(".usertablebody").html(res);
                toggleLoader();
            }
        }
    });

}

使用

$(this).dropdown();

如文档中所述，没有任何效果。

希望有人能帮帮我。

谢谢，

约拿

Answer 1

ajax完成并追加html后调用下拉菜单

toggleLoader();
$('.showuseroptions').dropdown();

确保每个下拉菜单都有一个唯一 ID

改变

 dataType: 'html',