输入“接管”的jQuery文本

Question

奇怪的是，我设置了一个jQuery特效来编辑用户的传记。本质上，他们可以点击文本并创建一个文本区。这很好用，接管也很好。但只有一次？

html：

<p id="bioEdit" style="text-align: center;" data-editable>{{ some.user.bio }}</p>

js (精简和压缩)：

$('#bioEdit').on('click', function() {
  var $input = $('<textarea class="form-control" style="160px" />').val( $('#bioEdit').text() );
  $('#bioEdit').replaceWith( $input );

  var save = function(){
    var $p = $('<p id="bioEdit" style="text-align: center;" data-editable />').text( $input.val() );
    var biography = $input.val()

    $input.replaceWith( $p );
  };
  $input.one('blur', save).focus();
});

有没有人可以只复制一次输入接管？如果是这样的话，你知道有什么方法可以让用户保持多次编辑吗？

Answer 1

仔细看看这一行：

$('#bioEdit').replaceWith( $input );

您删除了#bioEdit，将$input放在它的位置上。这意味着，网页上没有更多的#bioEdit。因此，$('#bioEdit').on('click', ...)只生效一次。

您可以做的是将#bioEdit包装在容器中，并仅替换容器内容：

<div id="bioEditContainer">
<p id="bioEdit" style="text-align: center;" data-editable>{{ some.user.bio }}</p>
</div>

$('#bioEditContainer').on('click', function() {
  $('#bioEdit').replaceWith( $input );

Answer 2

在编辑之后创建新的DOM元素，而您的click处理程序被绑定到旧的DOM元素。如果您希望click处理程序也在新创建的元素上工作，则需要将其修改为使用委托事件。

$(document).on('click', '#bioEdit', function() {
    // Your code here
});

您还可以在将<p>元素替换为<input>之前对其执行.clone(true)操作，然后使用克隆的副本替换输入。参见https://api.jquery.com/clone/。向克隆提供true将复制包含事件的元素。

然而，第一种方法会工作得更好，并且比每次用户想要编辑文本时克隆元素使用更少的内存和资源。

Answer 3

将元素替换为.replaceWith时，将丢失click事件处理程序

您可以通过创建一个可重用的函数来重新附加事件：

​

function editFn() {
  var $input = $('<textarea class="form-control" style="160px"/>').val($('#bioEdit').text());

  $('#bioEdit').replaceWith($input);

  var save = function() {
    var $p = $('<p id="bioEdit" style="text-align: center;" data-editable />').text($input.val());
    var biography = $input.val()

    $input.replaceWith($p);
     $('#bioEdit').on('click', editFn);
  };
  $input.one('blur', save).focus();
 }

$('#bioEdit').on('click', editFn); // attach the event handler here

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="bioEdit" style="text-align: center;" data-editable>{{ some.user.bio }}</p>

​