Javascript 动态创建文本区域和按钮

我面临着为每个新段落创建动态文本区和“添加”和“编辑”按钮的问题

到目前为止我所管理的内容的演示：

“添加”按钮用于创建新段落。用户应该会看到一个文本区域，在其中输入新段落的内容。第一次单击“添加”按钮时，按钮上的文本将更改为“保存”，第二次单击“保存”时，应将段落附加到div并为其分配唯一id，该id将用于使用新的“添加”和“编辑”按钮引用该段落

“编辑”按钮用于编辑单击“编辑”按钮的段落。为了使段落可编辑，我使用jqueryeditable。以下是指向jeditable插件的适当链接：

所有段落都从后端加载。使用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>

改变这些：

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

对这些：

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

在我看来，你的按钮是动态的，它们不能直接绑定事件。因此，您必须将事件委托给最近的静态父级，即
$（'.parages'）
或
$（文档）
本身，因为它始终可用

因此，如果您使用的是最接近的静态父对象，则必须将事件处理程序放在
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
    });

});

所以有什么问题吗？是的，我也看不出有什么问题。如果只是动态添加元素，您可以使用
.innerHTML
（dirty）或
.append
（clean）。问题是，一旦我在文本区域和按钮中循环，它们就会显示出来，但不会按需工作。它们应该具有与第一个元素相同的功能。我已经创建了一个，所以请检查它，让我知道我的代码有什么问题。谢谢：）谢谢@jai我会尝试你的方式并回复你。你的改变仍然会保持不变。看见