可调整大小的 jQuery UI 停止工作

Question

我有一个页面，允许您修改上面的一些文本，如所见即所得。

可编辑的 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>

加载到 div 上的 JS 是这样的:

    $('#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").

这是一个 fiddle ，展示了它是如何工作的。不再需要重新绑定(bind)点击事件，但您可能希望跟踪当前是否处于编辑模式。此处示例:http://jsfiddle.net/WxwLa/