replaceWith and textarea select

Question

Можно ли присвоить select()replaceWith()?

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

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

Я пробовал приведенный выше код, но dosen't работы (я предполагаю, что это потому, что 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 к несуществующему объекту (несуществующему во время привязки).

Следующее связывает событие click после, вставляя текстовое поле в 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(); 
});