Почему мой объект теряет свой атрибут изменяемого размера и как мне его вернуть?

Question

Вот пример моей проблемы. У меня есть вход, который обновляет мой текст div при изменении. Пользователь также может "перетаскивать" / "изменять размер" div по своему усмотрению. Проблема возникает после обновления текста через текстовый ввод. Как только текст изменился, div больше не "изменяет размер" с помощью мыши. Это ошибка? Как я могу прикрепить событие jquery 'resizable' после обновления текста?

Вот пример моего JS:

 $( "#text1" ).resizable({ ghost: true });
 $("#postcard").off("mouseover","#text1");
 $("#postcard").on("mouseover","#text1", function(){
   $('#text1').addClass('border_box');
 });
 $('#ti').on('change', function(){
   $('#text1').text($(this).val()); 
 });

Answer 1

jQuery добавляет дополнительную разметку в div, когда вы делаете его изменяемого размера. Когда вы устанавливаете текстовое значение для text1, он удаляет эту разметку. Самый простой способ исправить это - добавить в div диапазон, содержащий текст, который вы хотите изменить.

<div id="postcard" style="width:350px;height:100px">
    <div id="text1"><span id="text2">Hello there</span></div>
</div>
<input type="text" id="ti">

Затем измените это значение в вашем JavaScript:

$('#ti').on('change', function () {
    $('#text2').text($(this).val());
});