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

原文地址 https://xiegaosheng.com/post/view?id=71

 

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

 

 

下面是解决办法；把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();
});