0

summernote でフォーム フィールドを動的に作成するために使用する html テンプレートがあります。複製されたテンプレートがフォームに追加されると、ツールが正しく機能していないように見えますか? 誰かが私が欠けているものを提案してもらえますか?

私のJSコードは以下の通りです

$(document).ready(function () {


        bookIndex = 0;

        $('.addButton').click(function() {
            bookIndex++;
            var template = $('#bookTemplate'),
                clone    = template
                                .clone()
                                .removeClass('hide')
                                .removeAttr('id');
             $('#bookForm').append(clone)                   ;

        });

        $('textarea').summernote();


    });

html は次のとおりです。

 <form id="bookForm" method="post" class="form-horizontal">
        <div class="form-group">
            <label class="col-xs-1 control-label">Book</label>
            <div class="col-xs-4">
                <textarea type="text" class="form-control" name="title[]" placeholder="Title" ></textarea>
            </div>

        </div>
        </form>
    <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
     <div class="form-group" id="bookTemplate">
            <div class="col-xs-4 col-xs-offset-1">
                <textarea type="text" class="form-control" name="title[]" placeholder="Title" ></textarea>
            </div>
      </div>

完全なコードと対応する出力は次のとおりです: http://jsbin.com/jogema/edit?html,js,output

4

1 に答える 1

3

私はこれが遅いことを知っていますが、うまくいけば他の誰かを助けるでしょう.

問題は、複製しているテキストエリアを既に初期化していることです。代わりに、テンプレート HTML をコードにコピーしてから、summernote を初期化する必要があります。

jsbin からの作業 js は次のとおりです。

$(function() {

  $("#add_field_button").click(function (e) {
      var newProd = $('#prod_form_template')
              .clone()
              .removeClass('hide')
              .removeAttr('id')
              .appendTo('#prod_list');
       $('#prod_list').append(newProd);
       $(newProd).summernote();

  });

  $('#prod_list textarea').summernote();

});

およびjsbin：

http://jsbin.com/xevenisacu/1/edit?html,js,出力

アップデート

初期化した summernote エディターを本当に複製する必要がある場合は、それも実行できますが、最初にマークアップを破棄して削除する必要があります。

// first get rid of the summernote editor

$('#container').find('.summernote').summernote('destroy');

// next remove the extra code created by summernote

$('#container').find('.note-editor').remove();

// finally, remove the summernote element itself

$('#container').find('.summernote').remove();

// clone the template

$('#container').append($('.template.summernote').clone());

// initialize summernote

$('#container').find('.summernote').summernote();
于 2016-08-23T18:16:55.020 に答える