replaceWith和textarea选择

Question

是否可以将select()分配给replaceWith()？

$('#foo').one('click', function() {
 $(this).replaceWith('<textarea id="copy">'+$(this).text()+'</textarea>');
});

$('#copy').click(function() {
 $(this).select();
});

我已经尝试了上面的代码，但它不起作用（我认为这是因为replaceWith()是一个虚构的元素（如果你理解我的意思））。

然而，我已将onclick="this.focus();this.select()"置于replaceWith()

内

$('#foo').one('click', function() {
 $(this).replaceWith('<textarea id="copy" onclick="this.focus();this.select()">'+$(this).text()+'</textarea>');
});

但更喜欢它在replaceWith()代码之外，就像第一个代码试图做的那样。

Answer 1

在原始代码中，您将click事件绑定到不存在的对象（绑定时不存在）。

以下内容将在将textarea插入DOM后绑定点击事件，并且应该可以正常工作。

$('#foo').one('click', function() {
  $(this).replaceWith('<textarea id="copy">'+$(this).text()+'</textarea>');

  // at this point, the textarea exists and the binding will work.
  $('#copy').click(function() {
    $(this).select();
  });
});

另一种方法是使用on（）绑定文档对象上#copy的任何单击。

$('#foo').one('click', function() {
  $(this).replaceWith('<textarea id="copy">'+$(this).text()+'</textarea>');
});

// in this case, it will work even if #copy is non-existant at the time of binding
$(document).on('click', '#copy', function() {
  $(this).select();
});