Resizable not working, when change text
Hi all,
I'm doing resizable html divs in one root div. The resizable action stop working, if I change the html code inside the div. Here is an example:
-
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#change").click(function(){
$(".item").text("Hi");
});
$(".item").resizable();
});
</script>
</head>
<body>
<div id="viewarea" style="border: 1px solid black; width: 400px; height: 400px">
<div class="item" style="border: 1px solid red; width: 40px; height: 40px">Hello</div>
</div>
<input id="change" type="button" value="change">
</body>
</html>
Any suggestion, what I'm doing wrong?