如何将 Jodit 编辑器添加到动态添加的文本区域？

如何解决如何将 Jodit 编辑器添加到动态添加的文本区域？

我有这个 JavaScript：

j = 0;

function add_more_additional_field() {
    $('#additional_options').append(
        '<div class="form-group row mar-btm"><div class="col-md-3"><input type="hidden" name="af_no[]" value="' +  j + '"><input type="text" class="form-control" name="af_title[]" value="" placeholder="Additional Title"></div><div class="col-md-7"><textarea class="form-control editor" name="af_options[]"></textarea></div><div class="col-md-1"><button onclick="delete_row(this)"  class="btn btn-danger btn-icon"><i class="demo-psi-recycling icon-lg"></i>Remove</button></div></div><hr/>'
    );
    j++;
    var editor = new Jodit('#additional_options .editor');
}

function delete_row(em) {
    $(em).closest('.row').remove();
    update_sku();
}

脚本的作用是在点击时追加更多的表单域。这段代码工作正常。现在我还想在每次点击时附加一个 Jodit 编辑器。我尝试通过赋予唯一的 id 或类来实现（请参阅我如何在上面的代码中使用 j）。但是这段代码只在 first 文本区域附加了 Jodit 编辑器，而没有为其他文本区域添加它..

如何将编辑器附加到每个文本区域字段？

解决方法

以下行将始终针对具有 editor 类的 first 元素：

new Jodit('#additional_options .editor');

...当您想使用该类定位新的 last 元素时。因此，使用将 DOM 元素传递给 Jodit 构造函数的可能性。然后，您可以获取所有匹配项的节点列表，并获取其中的 最后一个，并将其传递给构造函数：

new Jodit([...document.querySelectorAll('#additional_options .editor')].pop());