Question

奇怪的是 - 我已经设置了jQuery效果来编辑用户的传记。基本上，他们可以单击文本并创建textarea。这工作正常，接管工作正常......但只有一次？

HTML：

mydata<-data.frame(height=NA)
mydata$height<-as.double(mydata$height)
typeof(mydata$height)

js（精简和精简）：

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

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

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元素，而您的点击处理程序绑定到旧的元素。如果您希望您的点击处理程序也可以处理新创建的元素，则需要对其进行修改以使用委托事件。

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

您可以.clone(true) <p>元素，然后将其替换为<input>，然后将输入替换为克隆副本。见https://api.jquery.com/clone/。提供克隆的true将使用事件复制元素。

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

Answer 3

使用.replaceWith

替换元素时，您将失去点击事件处理程序

您可以通过创建可重复使用的功能重新附加事件：

＆＃13;

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

＆＃13;

<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>

＆＃13;

jQuery文本输入＆＃34;接管＆＃34;

3 个答案: