Question

我的网站中有一个jquery函数，它要求可更改文本的DIV可编辑，可拖动和可调整大小，但是，在我更改DIV的内容后，DIV将失去调整大小的能力。
我希望有人可以帮助我，这是代码：

HTML

<form id="myform">
        <select id="fs"> 
        <option value="Arial">Arial</option>
        <option value="Verdana ">Verdana </option>
        <option value="Impact ">Impact </option>
        <option value="Comic Sans MS">Comic Sans MS</option>
    </select>

    <select id="size">
        <option value="7">7</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
    </select>
</form>
<textarea id="txt" style="width:400px; height:100px;"></textarea>
<div id='test' >
    test
</div>

CSS

#test {
max-width: 360px;
max-height: 320px;
padding: 0;
z-index: 1000;
}
}

Jquery的

$(function(){
  $('#txt').keyup(function(){
     $('#test').text($(this).val());
  });
});
$(function(){
    $("#test").resizable({
        maxHeight: 360,
        maxWidth: 320
    });
     $("#test").draggable();
});



$("#fs").change(function() {
    //alert($(this).val());
    $('#test').css("font-family", $(this).val());

});

$("#size").change(function() {
    $('#test').css("font-size", $(this).val() + "px");
});

也是完整的东西的小提琴： http://jsfiddle.net/JTVRZ/18/

Answer 1

有同样的问题，谷歌搜索它带我到这里，上述建议没有解决我的问题。

然而，它确实指出了我正确的方向...我需要销毁控件上的原始可调整大小的引用，以便重新实例化它。

$('#MyContol').resizable('destroy');
$('#MyContol').text(newtext);
$('#MyContol').resizable({ containment: $('#MyContol').parent() });

希望能帮助其他人解决这个问题。

Answer 2

您的问题正在发生，因为当您修改div竞争时，您将覆盖div中可调整大小的句柄元素。

您可以尝试在可调整大小的div中创建另一个100％宽度和高度的div来保存内容。

Answer 3

resizable函数在div上添加了一些标记（你可以使用firebug检查它）。当您替换文本时，该标记将丢失，因此您的div失去了调整大小的能力。更改文本后，应再次调用resizable函数。

在更改DIV内的文本后，无法使用jquery调整DIV大小

3 个答案: