jQuery UI resizable stops working

Question

I have a page that allows you to modify some text on it, like wysiwyg.

The editable div looks like this

<div id="area_3" class="dragThis" style="position: absolute; left: 43px; top: 5px; width: 237px; height: 157px; color: rgb(0, 0, 0);" data-color-default="#000" data-font-default="Verdana" data-content-type="text">
  <h1>Business Name</h1>123 Right Here Way
  <br>Tampa, FL 33607
  <br>info@yoursite.com
  <br>(813) 888-8888
</div>

And the JS that loads on that div is this:

    $('#startDragging div[class="dragThis"]').each(function(i) {
        if($(this).attr('data-content-type') == 'text'){
            $(this).resizable();
        }
        $(this).draggable({ containment: "parent" })
        .bind('dblclick', function() {
            $('#area').val($(this).attr('id'));
            if($(this).attr('data-content-type') == 'text'){
                editIT($(this));
            } else if($(this).attr('data-content-type') == 'image'){
                changeImage($(this));
            } else if($(this).attr('data-content-type') == 'video-image'){
                changeVideoImage($(this));
            }
        }).bind('click', function() {
            var styles = $(this).attr('style').split(';');
            $.each(styles, function(i) {
                var style = this.split(':');
                var style0 = $.trim(style[0]);
                var style1 = $.trim(style[1]);
                if(style0 == 'font-size'){
                    $('#controls #font-size option[value="'+style1+'"]').attr('selected', true);
                } else if(style0 == 'color'){
                    $('#controls #color option[value="'+style1+'"]').attr('selected', true);
                } else if(style0 == 'text-align'){
                    $('#controls #text-align option[value="'+style1+'"]').attr('selected', true);
                }
            });
        });
    });
});
function editIT(what){
    what.html('<textarea id="text_'+what.attr('id')+'" style="width:'+what.css('width')+';height:'+what.css('height')+';">'+what.html()+'</textarea>');
    $('#text_'+what.attr('id')).focus();
    what.unbind('dblclick');
    $('#text_'+what.attr('id')).blur(function() {
        var newText = $(this).val().replace(/\r\n|\r|\n/g,"<br />");
        what.html(newText);
        what.resizable();
        what.bind('dblclick', function() {
            $('#area').val($(this).attr('id'));
            editIT($(this));
        }).bind('click', function() {
            var styles = $(this).attr('style').split(';');
            $.each(styles, function(i) {
                var style = this.split(':');
                var style0 = $.trim(style[0]);
                var style1 = $.trim(style[1]);
                if(style0 == 'font-size'){
                    $('#controls #font-size option[value="'+style1+'"]').attr('selected', true);
                } else if(style0 == 'color'){
                    $('#controls #color option[value="'+style1+'"]').attr('selected', true);
                } else if(style0 == 'text-align'){
                    $('#controls #text-align option[value="'+style1+'"]').attr('selected', true);
                }
            });
        });
    });
}

Everything is working great, you can double click on the div and it changes to a textarea to edit the text, you can drag the text around.

But, you can only resize the box before you double click on it. if you double click on the box and modify the text then when you click away, the area is no longer resizable.

Any Suggestions?

Answer 1

Instead of changing the html of the actual resizable, why not put another container inside that will be converted to the text area?

You'd have something like:

<div id="area_3" class="dragThis" style="position: absolute; left: 43px; top: 5px; width: 237px; height: 157px; color: rgb(0, 0, 0);" data-color-default="#000" data-font-default="Verdana" data-content-type="text">
    <div id="edit">
         <h1>Business Name</h1>123 Right Here Way
        <br>Tampa, FL 33607
        <br>info@yoursite.com
        <br>(813) 888-8888</div>
</div>

And instead of passing $(this) to your editIt function, you would pass $(this).find("#edit").

Here's a fiddle showing how that works. The re-binding of the click events would no longer be necessary, but you would want to track whether you're currently in edit mode. Example here: http://jsfiddle.net/WxwLa/