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

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);
        }); 
    });

加载到模态中的 View 与 Materialize 网站上作为示例给出的 View 相同:

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

但是不行，所有tab内容同时显示，一个接一个。我已经尝试设置超时并将 get() 链接从 Controller 操作更改为直接操作，但它没有用。将选项卡加载到页面的静态元素中(例如，加载到“正文”中)使一切正常，但我需要这些选项卡位于模态内。可能是什么问题，我怎么可能解决它？

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

Answer 1

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

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