Hello.
Means
append() creates a new
div element which contains early initialized the plug-ins like
select2,
summernote, but in the dynamically created elements, these plugins are not loaded.
How to make old initialization triggered on new elements created?
Thank you!
$(document).on('click', '#addDiv', function () { $('#newDiv').append(""); }
Example of initializing the plugin:
$(document).ready(function () { $('.summernote').summernote({ height: null, lang: 'EN-us', toolbar: [ ["style", ["style"]], ["font", ["bold", "italic", "underline", "clear"]], ["fontname", ["fontname"]], ["color", ["color"]], ["para", ["ul", "ol", "paragraph"]], ["height", ["height"]], ["table", ["table"]], ["insert", ["link", "picture", "video", "hr"]], ["view", ["fullscreen", "codeview"]], ["help", ["help"]] ], popover: { image: [ ['custom', ['imageAttributes']], ['float', ['floatLeft', 'alignCenter', 'floatRight']], ['remove', ['removeMedia']] ], link: [ ['link', ['linkDialogShow', 'unlink']] ], air: [ ['color', ['color']], ['font', ['bold', 'underline', 'clear']], ['para', ['ul', 'paragraph']], ['table', ['table']], ['insert', ['link', 'picture']] ] }, callbacks: { onInit: null, onFocus: null, onBlur: null, the onenter: null, onKeyup: null, onKeydown: null, onSubmit: null, onImageUpload: function (files) { var $editor = $(this); var data = new FormData(); data.append('file', files[0]); $.ajax({ url: '{{ route("iup") }}', method: 'POST', data: data, processData: false, contentType: false, success: function (response) { $editor.summernote('insertImage', response); } }); }, onImageUploadError: null } }); }
p.s. and another question, if I need to reinitialize with the new settings plugin?