Why does my object lose its resizable attribute and how do I get it back?

Question

Here is an example of my problem. I have an input that updates my div text on change. The user can also 'drag and drop'/'resize' the div however they choose. The problem occurs after updating the text through the text input. Once the text has changed, the div is no longer 'resizable' using the mouse. Is this a bug? How can i attach the jquery 'resizable' event after text update?

Here is an example of my 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 adds additional markup to the div when you make it re-sizable. When you set the text value for text1 it is removing that markup. The simplest way to fix this would be to add a span inside the div containing the text you want to change.

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

Then change that value in you javascript:

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