javascript - 无法在动态生成的文本区域中输入内容

Question

很好地动态生成了一个tinymce文本区域，但无法在任何生成的文本区域中输入内容。

jsFiddle 预览:

http://jsfiddle.net/sammie85/KyNtB/

每个文本区域都有唯一的 ID，但无法找出可能出现的问题。

这是 HTML 头中的 JS:

<script type="text/javascript">
$(function(){
  var removeLink = ' <a class="remove" href="#" style="float:right; margin-top:-20px; margin-bottom:10px;" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';
$('a.add').relCopy({ append: removeLink});  
});
</script>

HTML 表单:

<form name = "form2" method="post" action="">

<div class="clone_box_holder cloneEmp">

<p>
<label><strong>New Text</strong></label>
<textarea id="textarea_id" name="content[]">
<?php echo stripslashes($content); ?>
</textarea>
  <div class="clear"></div>
</p>

</div>

<p><a href="#" class="add add_res_submit" rel=".cloneEmp">Add More Text</a></p>

</form>

JS 生成新的文本区域:

(function($) {

    $.fn.relCopy = function(options) {
        var settings = jQuery.extend({
            excludeSelector: ".exclude",
            emptySelector: ".empty",
            copyClass: "copy",
            append: '',
            clearInputs: true,
            limit: 0 // 0 = unlimited
        }, options);

        settings.limit = parseInt(settings.limit);

        // loop each element
        this.each(function() {

            // set click action
            $(this).click(function(){
                var rel = $(this).attr('rel'); // rel in jquery selector format             
                var counter = $(rel).length;

                // stop limit
                if (settings.limit != 0 && counter >= settings.limit){
                    return false;
                };

                var master = $(rel+":first");
                var parent = $(master).parent();                        
                var clone = $(master).clone(true).addClass(settings.copyClass+counter).append(settings.append);

                //Remove Elements with excludeSelector
                if (settings.excludeSelector){
                    $(clone).find(settings.excludeSelector).remove();
                };

                //Empty Elements with emptySelector
                if (settings.emptySelector){
                    $(clone).find(settings.emptySelector).empty();
                };                              

                // Increment Clone IDs
                if ( $(clone).attr('id') ){
                    var newid = $(clone).attr('id') + (counter +1);
                    $(clone).attr('id', newid);
                };

                // Increment Clone Children IDs
                $(clone).find('[id]').each(function(){
                    var newid = $(this).attr('id') + (counter +1);
                    $(this).attr('id', newid);
                });

                //Clear Inputs/Textarea
                if (settings.clearInputs){
                    $(clone).find(':input').each(function(){
                        var type = $(this).attr('type');
                        switch(type)
                        {
                            case "button":
                                break;
                            case "reset":
                                break;
                            case "submit":
                                break;
                            case "checkbox":
                                $(this).attr('checked', '');
                                break;
                            default:
                              $(this).val("");
                        }                       
                    });                 
                };

                $(parent).find(rel+':last').after(clone);

                return false;

            }); // end click action

        }); //end each loop

        return this; // return to jQuery
    };

})(jQuery);

非常感谢获得帮助。

Answer 1

看来您无法使用插件注入(inject)的 TinyMCE 编辑器来克隆 HTML。此链接在许多评论中提到了它:http://www.tinymce.com/forum/viewtopic.php?id=26372 。

链接中提到的

remove 在您的代码中对我不起作用，也许您可​​以让它工作。同时，请参阅下面的替代方案，我在复制附加了第三方插件的 DOM 元素时使用自己。

您可以将要继续注入(inject)的 DOM 创建一个 HTML 模板，类似于:

var template = '<div class="clone_box_holder cloneEmp"><p><label><strong>New Text</strong></label><textarea class="mceSimple" name="content[]"></textarea><div class="clear"></div></p></div>';

I have removed the id attribute of the text area, see note on the bottom of post.

不要克隆现有的已经注入(inject)的tinyMCE DOM元素，只需注入(inject)模板，然后重新附加tinyMCE插件以包含新的DOM元素。

当克隆已经注入(inject)的tinyMCE编辑器时，tinyMCE插件似乎会感到困惑。您只需注入(inject)基本的 DOM 元素，然后让tinyMCE 插件完成其余的工作，这似乎效果最好。

我已经做了一个非常非常基本的版本，删除了大多数与 textarea id 属性相关的独特代码，更改为仅关注相关代码。

<小时/>

DEMO - 动态注入(inject)tinyMCE文本区域

<小时/>

尝试将其合并到您的代码中。

Remove the text area id as it only causes problems, even when changing it in the code. You always know the context of the current textarea when you click into it anyway.

为了方便起见，完整的演示代码:

var template = '<div class="clone_box_holder cloneEmp"><p><label><strong>New Text</strong></label><textarea class="mceSimple" name="content[]"></textarea><div class="clear"></div></p></div>';

function initTinyMCE() {
    tinyMCE.init({
        mode: "textareas",
        theme: "simple"
    });
}

(function ($) {
    $.fn.relCopy = function (options) {
        var settings = jQuery.extend({
            excludeSelector: ".exclude",
            emptySelector: ".empty",
            copyClass: "copy",
            append: '',
            clearInputs: true,
            limit: 0 // 0 = unlimited
        }, options);

        settings.limit = parseInt(settings.limit);

        // loop each element
        this.each(function () {

            // set click action
            $(this).click(function () {                
                var $clone = $(template);

                $('form').find('.cloneEmp:last').after($clone);

                initTinyMCE(); // re-attach plug-in to include new DOM

                return false;
            }); // end click action

        }); //end each loop

        return this; // return to jQuery
    };

})(jQuery);


$(function () {
    var removeLink = ' <a class="remove" href="#" style="float:right; margin-top:-20px; margin-bottom:10px;" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';
    $('a.add').relCopy({
        append: removeLink
    });
});

initTinyMCE();