在动态创建的文本区域中实现脚本

Question

问题 - 在我的 html 页面上有一个文本区域。代码是-

<div id ="textFields" class="form-group">
        <p align="center">
        <br>
        <textarea placeholder="Enter note, max limit 200 words" class="form-control" rows="5" id="note" style="width: 80%;overflow:auto;"></textarea>
            <script>CKEDITOR.replace( 'note' );</script>
         </p>
</div>

现在我想创建多个文本区域，为此我使用了一个添加按钮和 jQuery 代码 -

$(document).ready(function(){
$("#addNew").click(function () {
    var inputField = jQuery('<p align="center"><br><textarea placeholder="Enter note, max limit 200 words" class="form-control" rows="5" id="note" style="width: 80%;overflow:auto;"></textarea><script>CKEDITOR.replace( 'note' );</script></p>');
    jQuery('#textFields').append(inputField);
}); });

当我单击 #addNew 按钮时，创建了文本区域，但未加载 CKEditor 脚本。这导致没有 CKEditor 功能的纯文本区域。

如何创建具有 CKEditor 功能的新文本区域？还有别的办法吗？我的方法错了吗？

Answer 1

首先，id 是 html 中的唯一标识符，您不应多次使用它。

其次，您不能以这种方式添加要执行的脚本标签。我建议像这样重组您的代码

<div id ="textFields" class="form-group">
    <p align="center">
        <br>
        <textarea id="note0" placeholder="Enter note, max limit 200 words" class="form-control" rows="5" style="width: 80%;overflow:auto;"></textarea>
    </p>
</div>

与以下 javascript

$(document).ready(function(){
    var note_id = 0;
    CKEDITOR.replace('note0');
    $("#addNew").click(function () {
        note_id++;
        var inputField = $('<p align="center"><br><textarea id="note' + note_id + '" placeholder="Enter note, max limit 200 words" class="form-control" rows="5" style="width: 80%;overflow:auto;"></textarea></p>');
        $('#textFields').append(inputField);
        CKEDITOR.replace('note' + note_id);
    });
});

在动态创建的文本区域中实现脚本

Implement script in dynamically created textareas

html

javascript

jquery

textarea