物化选项卡在加载到模态时不起作用

咖啡

因此,我有一个使用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);
        }); 
    });

加载到模态中的视图与在物化网站上作为示例给出的视图相同:

  <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()链接从控制器操作更改为直接操作,但这没有用。将选项卡加载到页面的静态元素中(例如,加载到“ body”中)可以使所有工作正常进行,但是我需要这些选项卡位于模式内部。可能是什么问题,我该如何解决?

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

阿什温尼

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

物化活动选项卡在模式中不起作用

来自分类Dev

物化css选项卡不起作用

来自分类Dev

javascript的选项卡在IE中不起作用

来自分类Dev

Boostrap选项卡在Codepen上不起作用

来自分类Dev

引导选项卡在localhost中不起作用

来自分类Dev

引导选项卡在Vue应用中不起作用

来自分类Dev

在Bootstrap 2中起作用的动态选项卡在Bootstrap 3中不起作用

来自分类Dev

首次单击时使用Ajax加载的Show Bootstrap选项卡不起作用

来自分类Dev

首次单击时,使用Ajax加载的Show Bootstrap选项卡不起作用

来自分类Dev

模态选项卡在第一次触发时无法正确加载

来自分类Dev

jQuery tabselect在单击选项卡时不起作用

来自分类Dev

jQuery tabselect在单击选项卡时不起作用

来自分类Dev

带选项卡图标顶部的离子选项卡在Android和IOS上不起作用

来自分类Dev

右键单击选项卡在Internet Explorer上不起作用

来自分类Dev

jQuery UI选项卡在Ajax调用后不起作用

来自分类Dev

OSX Cocoa使用选项卡在视图中的子控件之间导航不起作用

来自分类Dev

jQuery选项卡在生产环境中不起作用

来自分类Dev

Sherlock选项卡在方向更改上不起作用

来自分类Dev

右键单击选项卡在Internet Explorer上不起作用

来自分类Dev

选项卡在AngularJS的单页应用程序中不起作用

来自分类Dev

jQuery选项卡在生产环境中不起作用

来自分类Dev

Bootstrap 4选项卡在Wordpress Understrap主题中不起作用

来自分类Dev

Bootstrap 切换选项卡在 jsp 页面中不起作用

来自分类Dev

Cron 选项卡在 ec2-ubuntu 服务器中不起作用

来自分类Dev

Bootstrap 选项卡在我的注册表单页面中不起作用

来自分类Dev

bootstrap 4.3.1 选项卡在我的项目中不起作用

来自分类Dev

当使用数据目标而不是href的选项卡时,Bootstrap选项卡不起作用

来自分类Dev

使用PagerSlidingTabStrips单击选项卡时,切换选项卡不起作用

来自分类Dev

使用PagerSlidingTabStrips单击选项卡时,切换选项卡不起作用

Related 相关文章

  1. 1

    物化活动选项卡在模式中不起作用

  2. 2

    物化css选项卡不起作用

  3. 3

    javascript的选项卡在IE中不起作用

  4. 4

    Boostrap选项卡在Codepen上不起作用

  5. 5

    引导选项卡在localhost中不起作用

  6. 6

    引导选项卡在Vue应用中不起作用

  7. 7

    在Bootstrap 2中起作用的动态选项卡在Bootstrap 3中不起作用

  8. 8

    首次单击时使用Ajax加载的Show Bootstrap选项卡不起作用

  9. 9

    首次单击时,使用Ajax加载的Show Bootstrap选项卡不起作用

  10. 10

    模态选项卡在第一次触发时无法正确加载

  11. 11

    jQuery tabselect在单击选项卡时不起作用

  12. 12

    jQuery tabselect在单击选项卡时不起作用

  13. 13

    带选项卡图标顶部的离子选项卡在Android和IOS上不起作用

  14. 14

    右键单击选项卡在Internet Explorer上不起作用

  15. 15

    jQuery UI选项卡在Ajax调用后不起作用

  16. 16

    OSX Cocoa使用选项卡在视图中的子控件之间导航不起作用

  17. 17

    jQuery选项卡在生产环境中不起作用

  18. 18

    Sherlock选项卡在方向更改上不起作用

  19. 19

    右键单击选项卡在Internet Explorer上不起作用

  20. 20

    选项卡在AngularJS的单页应用程序中不起作用

  21. 21

    jQuery选项卡在生产环境中不起作用

  22. 22

    Bootstrap 4选项卡在Wordpress Understrap主题中不起作用

  23. 23

    Bootstrap 切换选项卡在 jsp 页面中不起作用

  24. 24

    Cron 选项卡在 ec2-ubuntu 服务器中不起作用

  25. 25

    Bootstrap 选项卡在我的注册表单页面中不起作用

  26. 26

    bootstrap 4.3.1 选项卡在我的项目中不起作用

  27. 27

    当使用数据目标而不是href的选项卡时,Bootstrap选项卡不起作用

  28. 28

    使用PagerSlidingTabStrips单击选项卡时,切换选项卡不起作用

  29. 29

    使用PagerSlidingTabStrips单击选项卡时,切换选项卡不起作用

热门标签

归档