单击“段落到文本区域”后，它会更新段落中的文本

更新代码，如下所述。 当用户将单击编辑按钮时 - 文本区域将显示内容，当用户单击保存时，标签将显示内容 它会起作用，你可以在这里看到 - https://jsfiddle.net/mf8wp3wf/：

<div class="editable_text">
<div id="dynamic-div">
  <p id="content-data">
    Lorem Ipsum Content Comes here...
  </p>
</div>
<div class="btns">
    <a href="#edit" class="btn edit-text btn-warning pull-left" data-toggle="tooltip" data-placement="bottom" title="Click to Edit"><i class="glyphicon glyphicon-pencil"></i></a>
    <a href="#update" class="btn update-text btn-success pull-right" data-toggle="tooltip" data-placement="top" title="Click to Update"><i class="glyphicon glyphicon-ok"></i></a>
  </div>
</div>

$(document).ready(function() {
  $("body").tooltip({ selector: '[data-toggle=tooltip]' });
  $(".edit-text").click( function(){ 
     var content = $("#content-data").html();
     $("#dynamic-div").html("<textarea id='content-area'>"+content+"</textarea>");
  });
  $(".update-text").click( function(){ 
    var text_date = $("#content-area").val();
    $("#dynamic-div").html("<p id='content-data'>"+text_date+"</p>");
  });

});

一个没有函数的快速解决方案。添加模糊和禁用按钮点击事件。

$(document).ready(function() {
  $("body").tooltip({ selector: '[data-toggle=tooltip]' });
});

$(document).ready(function() {
 $("#edit").click( function(){
  
  if($('.editable_text').css('display')=='block'){ 
 var text=$('.editable_text').text();
$('.editable_text').css('display','none');
$('#textarea_text').css('display','block').val(text).focus(); 
}
  })
  
$("#update").click( function(){
 
 if($('#textarea_text').css('display')=='block'){ 
  var val=$('#textarea_text').val();
$('.editable_text').css('display','block').text(val);
$('#textarea_text').css('display','none');   
}
 
 })
  
});

p, textarea{
  margin: 20px;
  padding: 15px;
  border: 1px solid #ccc;
  width: 300px;
}
.btns{
  width:300px;
  margin:20px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Google JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
   <div>
  <p class="editable_text">Lorem Ipsum Content Comes here... </p>
  <textarea id="textarea_text" style="display:none"></textarea>
  </div>
  <div class="btns">
<a id="edit" href="#edit" class="btn btn-warning pull-left" data-toggle="tooltip" data-placement="bottom" title="Click to Edit"><i class="glyphicon glyphicon-pencil"></i></a>
<a id="update" href="#update" class="btn btn-success pull-right" data-toggle="tooltip" data-placement="top" title="Click to Update"><i class="glyphicon glyphicon-ok"></i></a>
  </div>

代码中有一些错误，请检查控制台。

至于编辑，这是您可以做到的：

$("[href='#edit']").click(function(){
    $(".editable_text").attr("contenteditable", "true").focus();
});
$("[href='#update']").click(function(){
    $(".editable_text").attr("contenteditable", "false");
});

这是您更新的 JSFiddle

在我的演示中，我通过元素的 href 属性识别元素。您始终可以向其添加新类或使用唯一 ID。

另请注意，当您想按类引用元素时，不要忘记前面的点$(".editable_text")

很简单，看看这个：

$(document).ready(function() {
  $("body").tooltip({ selector: '[data-toggle=tooltip]' });
});
$('#update').on('click', function(){
  $('#result').append('<li>' + $('#myText').val() + '</li>');
  $('#myText').val("").attr("disabled", "disabled");
});
$('#edit').on('mouseup', function(){
  console.log( $('#myText') );
  $('#myText').attr("disabled", false).focus().select();
});

input{
  margin: 20px;
  padding: 15px;
  border: 1px solid #ccc;
  width: 300px;
}
.btns{
  width:300px;
  margin:20px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Google JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="editable_text">
  <input type='text' disabled id="myText" placeholder="Lorem Ipsum Content Comes here..."/>
  <div class="btns">
    <a href="#edit" id="edit" class="btn btn-warning pull-left" data-toggle="tooltip" data-placement="bottom" title="Click to Edit"><i class="glyphicon glyphicon-pencil"></i></a>
    <a href="#update" id="update" class="btn btn-success pull-right" data-toggle="tooltip" data-placement="top" title="Click to Update"><i class="glyphicon glyphicon-ok"></i></a>
  </div>
  <br><br><br><br>
  TODO LIST: 
  <div id="result"></div>
</div>