我有这个用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>




我的问题

我需要从ID为editor的HTML中提取文本区域。

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


而且我需要运行此JavaScript将其转换为WordPress中的WYSIWYG编辑器,其中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");

关于javascript - 使用jQuery向克隆的HTML节点添加自定义ID?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36736602/

10-12 07:35
查看更多