動態創建textarea和按鈕

Question

我面臨着爲每個新段落創建動態textarea和「添加」和「編輯」按鈕的問題。

DEMO什麼我迄今管理：

'添加' 按鈕用於創建新的段落。用戶應該看到一個textarea他們爲新的段落輸入內容。第一次點擊'添加'按鈕時，按鈕上的文本將變爲'保存'，第二次點擊'保存'時，它應該將該段落附加到div併爲其分配一個唯一的ID，這將用於參考新的'添加'和'編輯'按鈕。

「編輯」按鈕用於編輯單擊「編輯」按鈕的段落。爲了使段落可編輯我使用jQuery可編輯（可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 
    }); 

});