Resizable div без изменения размера после добавления текста

Question

Я использовал функцию jQuery UI для изменения размера элемента div. Функция изменения размера не работает после добавления текста в div.

<div id="resizable" class="ui-widget-content"> 
    Resizable div 
    </div> 

У меня есть кнопка для добавления текста в div. не

<input type="button" name="add" value="Add text" id="add"> // onclick add text function 

после добавления текста в DIV, он больше не изменяемый. Вот ссылка jsfiddle:jsfiddle

как обращаться с этим событием. Редактировать: Мое требование заключается в добавлении совершенно нового текста. Я не хочу добавлять новый текст в предыдущий текст.

Answer 1

Используйте отдельный диапазон для текста, поскольку изменение размера исправна на основе следующих дивы внутри изменяемыми DIV

<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div> 
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div> 
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div> 

если вы используете html(), он заменит их divs. Поэтому, пожалуйста, попробуйте следующие

<div id="resizable" class="ui-widget-content"> 
    <span id="resizable-text">Resizable div</span> 
    </div> 

и в JS

var txt="This is dummy text"; 
     $("#add").click(function(){ 
     $("#resizable-text").html(txt); 
     }); 

Если вы используете добавить текст будет добавляемых с существующим текстом.

Answer 2

Использование append вместо html

var txt="This is dummy text"; 
$("#add").click(function(){ 
    $("#resizable").append(txt); 
});