如何在 JavaScript 中附加所有功能

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。

现在我正在尝试追加更多文本区域

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 中添加更多具有确切功能的 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>