jquery - jQuery TE 克隆后不工作

Question

我从这里使用了 jQuery HTML 编辑器插件。我想在单击“添加”按钮时创建多个 HTML 编辑器。这是我的代码：

$(document).ready(function () {
  $(".jqte-test").jqte();
});

$('.clause-form').delegate(".add-button", "click", function () {
  if ($('.clause-box:last').find('.jqte-test').val() != "") {
    var newSection = $(this).parents('.clause-box').find('.jqte-test');
    var newDiv = $('.clause-form').append($(this).parents('.clause-box').clone());
    $(this).parents('.clause-box').find('.delete-button').show();
    $(this).parents('.clause-box').find('.add-button').hide();
    $('.clause-box:last').find('.jqte-test').jqteVal("");
    newSection.jqte();       
  }
});

克隆元素后，jQuery 插件不起作用。我无法进行任何基本操作。我怎样才能做到这一点？

<div class="clause-form">
  <div class="form-group clause-box">
    <div class="clause">
      <div class="col-md-3"></div>
      <div class="col-md-9">
        <textarea name="textarea" class="jqte-test student_grde" placeholder="Sub-Clause" id="txtSubClauseTemp" runat="server" style="width: 435px; !important"></textarea>
        <a href="javascript:void(0);" class="btn btn-primary add-button" id="btnAddRowTemp">+</a>
        <a href="javascript:void(0);" class="btn btn-danger delete-button" id="btnRemoveRowTemp" style="display: none;">X</a>
      </div>
    </div>
  </div>