Question

我正在尝试使用bootstrap模式来显示多个任务。内容不同，但格式相同。问题是当我尝试使用javascript编辑我的textareas时。当我关闭并打开不同的任务时，代码会发生冲突：

<!-- Module menu tree style -->
<script type="text/javascript">

// removing data from modal
    $('body').on('hidden.bs.modal', '.modal', function () {
        $(this).removeData('bs.modal');
    });

// new modal scripts
    $(document.body).on('shown.bs.modal', function () {

        function getScript(url, success) {
            var script = document.createElement('script');
            script.src = url;
            var head = document.getElementsByTagName('head')[0],
                    done = false;
            // Attach handlers for all browsers
            script.onload = script.onreadystatechange = function () {
                if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
                    done = true;
                    // callback function provided as param
                    success();
                    script.onload = script.onreadystatechange = null;
                    head.removeChild(script);
                }
                ;
            };
            head.appendChild(script);
        };

        getScript('{{ URL::asset('assets/js/summernote.min.js')}}', function () {

            if (typeof jQuery == 'undefined') {
            } else {
                $('.summernote').summernote({
                    height: 150,                 // set editor height
                    minHeight: null,             // set minimum height of editor
                    maxHeight: null,             // set maximum height of editor
                    focus: false,                 // set focus to editable area after initializing summernote
                    codemirror: { // codemirror options
                        theme: 'monokai'
                    },
                    toolbar: [
                        ['font', ["bold", "italic", "underline", "superscript", "subscript", "strikethrough", "clear"]],
                        ['fontname', ['fontname']],
                        ['fontsize', ['fontsize']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['height', ['height']],
                        ['table', ['table']],
                        ['insert', ['link', 'picture', 'hr']],
                        ['view', ['codeview']],
                        ['help', ['help']]
                    ]
                });
            }
        });
    });

// summernote script for the first time i open the modal
    jQuery(document).ready(function () {
        jQuery('.summernote').summernote({
            height: 150,                 // set editor height
            minHeight: null,             // set minimum height of editor
            maxHeight: null,             // set maximum height of editor
            focus: false,                 // set focus to editable area after initializing summernote
            codemirror: { // codemirror options
                theme: 'monokai'
            },
            toolbar: [
                ['font', ["bold", "italic", "underline", "superscript", "subscript", "strikethrough", "clear"]],
                ['fontname', ['fontname']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'hr']],
                ['view', ['codeview']],
                ['help', ['help']]
            ]
        });
    });

</script>

我尝试使用jQuery.noConflict（）但它只会让它变得更糟。感谢

Answer 1

我解决了自己的问题。事实证明，通过使用我在网上找到的getScript（url，success）函数，我过度复杂了。通过使用以下函数在主页中包含插件的JavaScript文件和触发插件的代码，Bootstrap模式工作得很好：

// functions to clear the modals 
       $("#modalEditTask").on('hidden.bs.modal', function () {
        $("#modalEditTask").removeData('bs.modal');
    });
    $("#modalAddTaskModule").on('hidden.bs.modal', function () {
        $("#modalAddTaskModule").removeData('bs.modal');
    });

// functions to start the plugins
    $("#modalAddTaskModule").on('shown.bs.modal', function () {
        // call sumernote text editor
        jQuery('.summernote_new').summernote({
         ...
        });

        jQuery(".switchCheckBox").bootstrapSwitch();
    });
    $("#modalEditTask").on('shown.bs.modal', function () {
    ...
    });

警告！如果您使用多个模态，如上例所示，则必须分别为每个模态调用该函数。

此外，您使用的每个插件都必须在“shown.bs.modal”函数中调用，即使它在主布局或其他任何地方调用。它不会在你的模态中起作用，否则

Bootstrap3远程模式中的Javascript冲突

1 个答案: