Динамическое создание текстового поля и кнопок

Question

У меня возникают проблемы с созданием динамических текстовых областей и кнопок «Добавить» и «Редактировать» для каждого нового абзаца.

DEMO, что мне удалось до сих пор:

'Добавить' кнопка для создания новых абзацев. Пользователь должен увидеть текстовое поле, в котором они вводят содержимое для нового абзаца. В первый раз, когда они нажимают кнопку «Добавить», текст на кнопке меняется на «Сохранить», второй раз, когда они нажимают «Сохранить», он должен добавить абзац в div и назначить ему уникальный идентификатор, который будет использоваться для ссылайтесь на него с помощью новых кнопок «Добавить» и «Изменить».

Кнопка «Редактировать» предназначена для редактирования абзаца, с которого была нажата кнопка «Изменить». Чтобы сделать редактируемый абзац, я использую jquery editable (jeditable). Ниже приведены соответствующие ссылки на jeditable плагин:

• plugin documentation
• jeditable live demo

Все пункт нагрузки от заднего конца. Использование PHP для загрузки пунктов:

<div class="paragraphs"> 
     <?php 
     foreach($notes['children'] as $overview) : 
     if ($overview['type'] == 'Paragraph') : 
     ?> 
      <div id="block1"> 
      <p class='edit1'><?php echo $overview['content']; ?></p> 
      <p> 
      <?php if (isset($subject) && $subject==true) : ?> 
       <div id="para1"> 
       <p><textarea cols="40" rows="2" id="textarea1"></textarea></p> 
       <button id="add1" class="add1 success tiny">Add</button> 
       <button id="startEdit1" class="canEdit1 tiny">Edit</button> 
       </div> 
      <?php endif; ?> 
      </p> 
      </div> 
     <?php endif; ?> 
     <?php endforeach; ?> 
    </div> 

'Добавить' и 'Изменить' кнопку функциональность:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="<?php echo base_url(); ?>assets/teachers/js/jquery.jeditable.min.js"></script> 
<script> 
    var $subject_id = "<?php echo $subject_id ?>"; 
    var $teacher_id = "<?php echo $teacher_id ?>"; 

    // Define our elements 
    var $lock = false; 
    //Make the elements editable 
    function makeThingsEditable() { 
     $editables.editable({ 
      emptyMessage : '<em>Please write something...</em>', 
      callback : function(data) { 
       $info.hide(); 
       $info.eq(0).show(); 
      } 
     }); 
    } 

    function ajaxRequest(data, method_url, request_type) { 
     $.ajaxSetup({ 
      beforeSend: function(xhr) { 
       xhr.setRequestHeader('HTTP/1.1', '200'); 
      } 
     }); 

     var eurl = "<?php echo base_url(); ?>edit_flow/" + method_url; 
     var params = 'inputJson=' + data; 

     var post = $.ajax({ 
     type: request_type, 
     url: eurl, 
     data: params, 
     success: function(result) { 
      console.log('result: '+result); 
      console.log('data: '+params); 
     }, 
     async: false 
     }); 

     //alert(post.responseText); 
     return post.responseText; 
     console.log(post.responseText); 
    } 

    // Edit paragraph button 
    // Button that toggles the editable feature 
    var i = 1; 
    var $editables = $('.edit'+i); 
    $('.canEdit'+i).click(function() { 
     if($editables.is(':editable')) { 
      //need to call save action here and pass in updated JSON 
      if ($(this).text() == 'Save changes') 
      { 
       var text = $(".edit"+i).text(); 

       // ajax request 
       var datum = '{"subject_id":'+$subject_id+',"teacher_id":'+$teacher_id+',"editedContent":"'+text+'"}'; 
       ajaxRequest(datum, 'editNotes', 'POST'); // POST request on editNotes 
       ajaxRequest(datum, 'loadNotes', 'GET'); // GET request on loadNotes 

       // jquery request 
       $.get("<?php echo base_url(); ?>edit_flow/loadNotes", function(data) { 
       var data = '{"subject_id":'+$subject_id+', "teacher_id":'+$teacher_id+', "editedContent":"'+text+'"}'; 
       //console.log(data); 
       alert(data); 
       }); 
      } 

      $editables.editable('destroy'); 
      this.innerHTML = 'Edit'; 
      i++; 
     } else { 
      makeThingsEditable(); 
      this.innerHTML = 'Save changes'; 
      // TODO h4kl0rd: make $editables selectable 
     } 
    }); 

    // Add paragraph button 

    i = 1; 
    $('#textarea'+i).hide(); 
    $('#add'+i).click(function(){ 
     if ($(this).text() == "Add") { 
     $('#textarea'+i).show(); 
     $(this).text('Save'); 
     $('#textarea'+i).focus(function() { 
      this.select(); 
     }); 
     } 
     else if ($(this).text() == "Save") { 
     if ($('#textarea'+i).val() == ''){ 
      alert('Enter something...'); 
     } else { 
      $(this).text("Add"); 
      $('#textarea'+i).hide(); 
      var overview = $('#textarea'+i).val(); 
      i++; 
      $('.paragraphs').append('<div id="block'+i+'"><p class="edit'+i+'">'+overview+'</p><div id="para'+i+'"><p><textarea cols="40" rows="2" id="textarea'+i+'"></textarea></p><button id="add'+i+'" class="add'+i+' success tiny">Add</button><button id="startEdit'+i+'" class="canEdit'+i+' tiny">Edit</button></div></div>'); 
     } 
     } 
    }); 


</script> 

Любая помощь приветствуется.

Answer 1

изменить эти:

$('.canEdit'+i).click(function() { 
$('#add'+i).click(function(){ 

к этим:

$(document).on('click', '.canEdit'+i, function() { 
$(document).on('click', '#add'+i, function() { 

То, что казалось мне ваши кнопки являются динамическими, и они не могут принимать непосредственное событие связывания. Поэтому вместо этого вы должны делегировать событие ближайшему статическому родителю, который равен $('.paragraphs') или самому $(document), потому что он всегда доступен.

Итак, если вы используете ближайший статический родитель, тогда вы должны поместить обработчики событий в doc ready, и если вы используете $(document), тогда это не нужно.

$(function(){ 
    var i = 1; 
    var $editables = $('.edit'+i); 

    $('.paragraphs').on('click', '.canEdit'+i, function() { 
     // all your edit stuff 
    }); 

    $('.paragraphs').on('click', '#add'+i, function() { 
     // all your addstuff 
    }); 

});