How to initialize a dynamically created element?


Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
14 views
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?
by | 14 views

2 Answers

0 like 0 dislike
Field append "initialize" the plugin for this item.
$(document).on('click', '#addDiv', function () { $('#newDiv').append(""); $('.summernote').summernote(); ... }

If you need a setting specifically for this item can id them and give to them has to call and setup to do.
$(document).on('click', '#addDiv', function () { $('#newDiv').append(""); $('#summer1').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 } }); }

UPD
by
0 like 0 dislike
initializeui all plugins after creating a new node or element
as for the new plugin settings without the code can't say
by

Related questions

0 like 0 dislike
1 answer
0 like 0 dislike
2 answers
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
110,608 questions
257,187 answers
0 comments
40,796 users