0

I used the jQuery HTML Editor plugin from here. I want to create multiple HTML editors on clicking an 'add' button. Here is my code for that:

$(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();       
  }
});

After I clone the element the jQuery plugin is not working. I'm not able to do any basic operations. How can I do this?

<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>

i am not able to any operation for this textarea like bold ,italic

user3090790
  • 826
  • 1
  • 7
  • 14
  • Try `clone(true, true)` to copy the element with it's event handlers attached, although to be honest in case like this you're better off re-initialising the plugin on the cloned element. – Rory McCrossan Jan 31 '17 at 10:40
  • 1
    Also note that `delegate()` was deprecated a *long* time ago. You should use `on()` instead. Also check the version of jQuery you're using. I'd suggest 1.12 at a minimum – Rory McCrossan Jan 31 '17 at 10:42

0 Answers0