如何在 JavaScript 中使用所有功能的 append

Question

我有這個 JavaScript

<script>
    $(document).ready(function() {
        $(".summernote").each(function() {
            const self = $(this); // store self as this and this is referenced to each .summernote element.
            self.summernote({
                placeholder: "start typing",
                lang: "en-GB",
                height: 300, // set editor height
                minHeight: null, // set minimum height of editor
                maxHeight: null, // set maximum height of editor
                focus: true, // set focus to editable area after initializing summernote
                callbacks: {

                    onImageUpload: function(files) {
                        for (var i = 0; i < files.length; i++) {
                            send(files[i], self); // pass selft to send function
                        }
                    },

                },
            });
        });
    });

    function send(file, context) {
        var xhttp;
        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                response = JSON.parse(this.responseText);
                const urls = response.url;
                urls.forEach(item => {
                    context.summernote('insertImage', item, function($image) {
                        $image.attr('src', item).attr('width', '100%');
                    });

                });
            }
        };
        var data = new FormData();
        data.append("files[]", file);
        xhttp.open("POST", "/admin/ans-img-upload", true);
        xhttp.send(data);


    }
</script>

我有這個 html

<textarea class="form-control summernote" id="summernote" name="af_options[]"> </textarea>

這適用於 javascript。

現在我正在嘗試 append 更多 textarea

function add_more_additional_field() {

        $('#additional_options').append(
            '<textarea class="summernote" id="summernote" name="af_options[]" placeholder="Start typing the answers here"></textarea>'
        );

        $(document).ready(function() {
            $([...document.querySelectorAll('#additional_options .summernote')].pop()).summernote();
        });

    }

但並非所有功能都像

 context.summernote('insertImage', item, function($image) {
                            $image.attr('src', item).attr('width', '100%');

被附加。

請我需要有關如何使用 javascript 中的確切 function 的 append 更多 textarea 的幫助，以便像在 $(document).ready() 上實際加載站點時那樣工作...

Answer 1

您需要為每個新的textarea定義不同的 id。

下面的例子：

 $(document).ready(function () { $(".summernote").each(initSummernote); }); function send(file, context) { var xhttp; xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { response = JSON.parse(this.responseText); const urls = response.url; urls.forEach(item => { context.summernote("insertImage", item, function ($image) { $image.attr("src", item).attr("width", "100%"); }); }); } }; var data = new FormData(); data.append("files[]", file); xhttp.open("POST", "/admin/ans-img-upload", true); xhttp.send(data); } function initSummernote() { const self = $(this); // store self as this and this is referenced to each.summernote element. self.summernote({ placeholder: "start typing", lang: "en-GB", height: 300, // set editor height minHeight: null, // set minimum height of editor maxHeight: null, // set maximum height of editor focus: true, // set focus to editable area after initializing summernote callbacks: { onImageUpload: function (files) { for (var i = 0; i < files.length; i++) { send(files[i], self); // pass selft to send function } }, }, }); } function add_more_additional_field() { const count = $(".summernote").length + 1; const id = `summernote${count}`; $("#additional_options").append( `<textarea class="form-control summernote" id="${id}" name="af_options[]"></textarea>` ); $(`#${id}`).each(initSummernote); } $("#add").on("click", add_more_additional_field);

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <:-- include summernote css/js --> <link href="https.//cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min:css" rel="stylesheet"> <script src="https.//cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script> <button id="add">Add more</button> <div id="additional_options"> <textarea class="form-control summernote" id="summernote1" name="af_options[]"></textarea> <textarea class="form-control summernote" id="summernote2" name="af_options[]"></textarea> </div>