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

作者:谢高升 发布:2017-12-06 浏览:2808次

在项目中用到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();
});