Question

所以我有一个外部插件，我在custom.js中包含了它们的JS。在我从另一个页面访问该页面（初始加载）之前，它们工作正常。刷新页面后，JS开始工作。

到底有什么问题，有人提出建议吗？

$(document).ready(function(){                  
    function init_template(){
        ... (Another JS)

        //Trumbowyg WYSIWYG Editor
        $('.js-trumbowyg').trumbowyg({
            btns: [
                ['strong', 'em'],
                ['justifyLeft', 'justifyCenter'],
                ['unorderedList','link']
            ]
        });

        //Select2
        $('.js-select2').select2();
        $(".js-example-placeholder-single").select2({
            placeholder: "Pilih Produk",
            allowClear: true
        });

        //Filepond
        const inputElement = document.querySelector('input[type="file"]');
        const pond = FilePond.create( inputElement );
        }
});

完整的JS代码 https://jmp.sh/V98Ytc9（从1454行开始）

我在html中这样称呼他们

<div class="content bottom-25">
     <!-- Select2 -->
     <select class="js-example-placeholder-single js-states form-control">
        <option></option>
        <option value="iOS">iOS</option>
        <option value="Linux">Linux</option>
        <option value="MacOS">MacOS</option>
        <option value="Android">Android</option>
        <option value="Windows">Windows</option>
     </select>

     <!-- WYSIWYG Editor Using Trumbowyg -->
     <textarea class="js-trumbowyg" placeholder="Ceritakan reviewmu secara menarik"></textarea>

      <!-- Filepond FIle Uploader-->
      <input type="file">
</div>

完整的HTML代码https://jmp.sh/wPgiHCB

也许有些图片可以帮忙

初始负载 https://jumpshare.com/v/h8uw9pTUSlJScQa9CxlD

刷新后 https://jumpshare.com/v/eh5iGDfjVKObYIWczWav

Answer 1

[更新]已通过在与此问题页面链接的每个页面中调用相关的插件脚本和css文件来解决。

对不起，新手体验

欢呼

Answer 2

我认为您必须像这样对脚本进行排序

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/plugins.js"></script>
<script type="text/javascript" src="trumbowyg/dist/trumbowyg.min.js"> </script>
<script type="text/javascript" src="select2/dist/js/select2.min.js"></script>
<script type="text/javascript" src="filepond/dist/filepond.js"></script>
<script type="text/javascript" src="scripts/custom.js" async></script>

最后加载Custom.js。因为它包含其他js中的函数调用（例如.trumbowyg（..）是trumbowyg.min.js）。

我的JS代码不适用于初始加载/页面更改

2 个答案: