jQuery UI resizable перестает работать

Question

У меня есть страница, которая позволяет вам редактировать текст, например wysiwyg.

редактируемой div выглядит следующим образом

<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> 

И в JS, который загружает на этой div является следующее:

$('#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); 
       } 
      }); 
     }); 
    }); 
} 

Все работает замечательно, вы можете дважды щелкнуть на div и изменения в текстовое поле для редактирования текста вы можете перетащить текст.

Но вы можете изменить размер только до того, как дважды щелкните по нему. если вы дважды щелкните по квадрату и измените текст, а затем, щелкнув, область больше не изменяется.

Любые предложения?

Answer 1

Вместо того, чтобы изменять html фактического размера, почему бы не поместить другой контейнер внутри, который будет преобразован в текстовую область?

Вы бы что-то вроде:

<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> 

И вместо передачи $(this) к вашей editIt функции, вы бы пройти $(this).find("#edit").

Вот скрипка, показывающая, как это работает. Повторная привязка событий кликов больше не понадобится, но вы хотите отслеживать, находитесь ли вы в режиме редактирования. Пример: http://jsfiddle.net/WxwLa/