javascript - jQuery文本输入“接管”

奇怪的是-我设置了一个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();
});

任何人都可以复制一次仅输入接管吗？如果是这样，您是否知道允许用户多次编辑的任何方法？

最佳答案

仔细看这一行：

$('#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 );