pjax中一些js插件不生效的解决办法

来源:互联网 发布:淘宝售前客服工作流程 编辑:程序博客网 时间:2024/06/05 20:50

个人博客原文地址https://xgs888.top/post/view?id=71

在项目中用到pjax,有一些其他js插件是在子页面中,pjax只是局部的加载,导致js生效项目框架用的laravel


image.png


下面是解决办法;把js插件放到pjax的容器里面简单粗暴

<section class="content" id="pjax-container">@if(request()->pjax() ==1)    <!-- jQuery 3 -->    <script src="{{asset('/bower_components/jquery/dist/jquery.min.js')}}"></script>    <script type="text/javascript" src="{{asset('/static/plugins/bootstrap-iconpicker/bootstrap-iconpicker/js/iconset/iconset-fontawesome-4.3.0.min.js')}}"></script>    <script type="text/javascript" src="{{asset('/static/plugins/bootstrap-iconpicker/bootstrap-iconpicker/js/bootstrap-iconpicker.js')}}"></script>@endif    <!-- Your Page Content Here -->    @yield('content')</section><!-- /.content -->
$.pjax.defaults.timeout = 5000;$.pjax.defaults.maxCacheLength = 0;$(document).pjax('a', '#pjax-container', { fragment: 'body' });

然后在定义一个pjax加载完成的

$(document).on('pjax:complete', function() {    //icheck插件    $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({        checkboxClass: 'icheckbox_minimal-blue',        radioClass: 'iradio_minimal-blue',        //  increaseArea: '20%' // optional    });    //图标插件加载    $('#target').iconpicker();});