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

【问题标题】：How to add Jodit editor to dynamically added text areas?如何将 Jodit 编辑器添加到动态添加的文本区域？
【发布时间】：2021-05-20 18:26:25
【问题描述】：

我有这个 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 编辑器，而不会为其他文本区域添加它..

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

【问题讨论】：

你可以将j设置为全局 -- window.j = 0; 并且每次都设置为window.j++;
请解释更多@Zak
@Zak，在 OP 的代码中它已经是一个全局的。
j++ 的工作方式不同。我在其中一个输入中使用它

标签： javascript html forms append jodit

【解决方案1】：

以下行将始终以 editor 类的 first 元素为目标：

new Jodit('#additional_options .editor');

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

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

【讨论】：