使用 jQuery 将自定义 ID 添加到克隆的 HTML 节点

Add a custom ID to a cloned HTML node using jQuery?

本文关键字：HTML 节点 添加 jQuery 自定义 ID 使用      更新时间：2023-09-26

我有这个用JavaScript克隆的HTML... 

<tr class="empty-row screen-reader-text">
    <td><a class="button remove-row" href="#">-</a></td>
    <td><input type="text" class="widefat" name="name[]" /></td>

    <td><input type="text" class="widefat" name="url[]" value="http://" /></td>
    <td><a class="sort">|||</a></td>
    <td>
        <textarea id="editor"></textarea>
    </td>
</tr>

当单击一个按钮时，它会克隆上面的 HTML 表行，并使用这个 JS/jQuery .clone(true)将其作为新行插入到 DOM 中...... 

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('#add-row').on('click', function() {
        var row = $('.empty-row.screen-reader-text').clone(true);
        row.removeClass('empty-row screen-reader-text');
        row.insertBefore('#repeatable-fieldset-one tbody>tr:last');
        return false;
    });
});
</script>

我的问题

我需要从上面的 HTML 中获取带有 ID editor的文本区域...... 

<textarea id="editor"></textarea>

我需要运行这个 JavaScript 以将其转换为 WordPress 中的所见即所得编辑器，其中以下 id 的值是添加到 DOM 的每个新行/编辑器的唯一值...... 

tinyMCE.execCommand('mceAddControl', false, id);

因为 HTML 行是克隆的clone(true)所以它会从前一行复制相同的编辑器实例，因为我无法使用唯一 ID 设置和启动新编辑器。

那么，我如何重现所有这些功能，同时允许添加到 DOM 的新行具有自定义 ID 值，并在将新行添加到 DOM 后在该新 ID 上运行tinyMCE.execCommand('mceAddControl', false, id);？

我建议您在克隆后删除重复的ID，并使用类名代替它。如果ID重复，TinyMCE不会创建编辑器。

$(".screen-reader-text").clone().find("textarea").removeAttr("id").addClass("editor");

然后编辑器绑定代码将是，

tinyMCE.execCommand('mceAddControl', false, ".editor");
相关文章：