我试图使用一个引导模式来显示多个任务。内容不同，但格式是一样的。问题是，当我试图使我的文本区域可编辑的javascript。当我关闭和打开不同的任务时，代码会发生冲突:
<!-- 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()，但它只会使它更糟。由于
我自己解决了问题。事实证明，我使用了我在网上找到的getScript(url, success)函数，使自己过于复杂。通过在主页中包含插件的JavaScript文件和触发插件的代码，以及在主页中使用以下函数，引导模态可以很好地工作:
// 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 () {
...
});
警告! !如果你像上面的例子那样使用多个模态，你必须为每个模态分别调用这个函数。
另外，你使用的每个插件，都必须在"show .bs "中调用。Modal "函数，即使它在主布局或其他任何地方被调用。否则