javascript - 更新段落中的文本后，单击段落到文本区域

Question

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

function editable_text_clicked() {
  var div_text = $(this).html();
  var text_div = $("<textarea />");
  text_div.val(div_text);
  $(this).replaceWith(text_div);
  text_div.focus();
  text_div.blur(text_divBlurred);
}



function blurred(argument) {
  var html = $(this).val();
  var viewableText = $(".editable_text p");
  viewableText.html(html);
  $(this).replaceWith(viewableText);
  // setup the click event for this new div
  viewableText.click(editable_text_clicked);
}
$(document).ready(function() {
  $(".btn").click( function(){
    $("editable_text").(editable_text_clicked);
  })
});

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 class="editable_text">
  <p>
    Lorem Ipsum Content Comes here...
  </p>
  <div class="btns">
    <a 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 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>
</div>

我对 JS 很差，但仍然想学习它，我今天的任务是创建一个 待办事项列表 ，所以这就是我想要的。当我单击铅笔图标时， p在 .editable_text应该编辑，编辑后，当我单击“确定”时，文本应附加到 p在 .editable_text

这是 fiddle 链接，https://jsfiddle.net/zeasts/nfL7qcak/8/

Answer 1

按如下所述更新代码。当用户单击编辑按钮时 - 文本区域将显示内容，并且当用户单击保存 p 标签时将显示内容它将起作用，您可以在此处看到 - 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>");
  });


});