加载到模态时，具体化选项卡不起作用

Question

所以我有使用 Materialize CSS 的项目，在我的 html 中我有触发模态的按钮，一些数据，包括带有选项卡的脚本，应该加载到这个模态中。

我的代码如下所示：

    $('.modal-trigger').click(function () {
        var id = $(this).data('id');
        animatedOpenModal($(this).attr('id'),'modalbox','open');
        $.get('{{action("Admin\Controller@getUser")}}'+'/'+id).success(function(data){
            $('.modal-content').html(data);
        }); 
    });

加载到模态中的视图与 Materialise 网站上作为示例给出的视图相同：

  <div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
    <div id="test1" class="col s12">Test 1</div>
    <div id="test2" class="col s12">Test 2</div>
    <div id="test3" class="col s12">Test 3</div>
    <div id="test4" class="col s12">Test 4</div>
  </div>
  <script>
    $(document).ready(function(){
      $('ul.tabs').tabs();
    });
  </script>

但是不行，所有标签内容同时显示，一个接一个。我已经尝试设置超时并将 get() link 从控制器操作更改为直接操作，但它没有用。将选项卡加载到页面的静态元素中（例如，加载到 'body' 中）使一切正常，但我需要将这些选项卡放在模态中。可能是什么问题，我怎么可能解决它？

非常感谢任何可能的帮助。

Answer 1

好吧，我只是为所有这些东西添加了 id：将 $('.modal-content').html(data); 更改为 $('#modalbox').children('.modal-content').html(data);，它解决了我的问题

Answer 2

只需在脚本中添加以下代码：

$('.modal-trigger').leanModal({
   ready: function () {
      $('ul.tabs').tabs();
   }
});

加载到模态时，具体化选项卡不起作用

materialize tabs dont work when loaded into a modal

html

javascript

css

jquery

materialize