Jqueryクラスがlive（）で追加された後のサイズ変更可能な問題

Question

作成されたdivがクリックされたときにresizable（）が機能しなくなりました。私がやっているのは、live（）クラスを追加することだけです。この問題の解決策は何ですか？

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" type="text/css" media="all" /> 
    <script src="http://code.jquery.com/jquery-1.4.4.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js" type="text/javascript"></script> 

<style> 
    .aaa { width:100px; height:100px;background-color:#ccc;margin-bottom:5px;} 
    p{widht:500px; height:500px; margin:0px; padding:0px;border:2px solid red;color:#000;} 
</style> 


<button>Click to create divs</button> 
<p id="ptest"></p> 

<script type="text/javascript"> 
var dividcount = 1; 

$("button").click(function() { 
    var myDiv = $('<div id=lar' + dividcount + ' class=aaa></div>'); 
    $(myDiv).resizable().draggable().appendTo('#ptest'); 

    dividcount++; 
}); 

$('div').live('click', function() { 

    $('div').removeClass('selected'); 
    $('div').html(''); 

    $(this).addClass('selected'); 
    $(this).html('div #' + this.id); 
}); 
</script> 

Answer 1

それは、このためです：

$('div').html(''); 

divの内側のHTMLアウトあなたは明らか。サイズ変更可能なものを作成すると、jQuery UIに必要なコンテンツが追加されます。たとえば、次のようにこの問題に対処する

<div id="lar1" class="aaa ui-resizable ui-draggable" style="position: absolute; top: 38px; left: 12px; width: 125px; height: 120px; "> 
    <div class="ui-resizable-handle ui-resizable-e"></div> 
    <div class="ui-resizable-handle ui-resizable-s"></div> 
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; "></div> 
</div> 

一つの方法は、特定のコンテナにテキストを入れて、それを修正することで、例えば：

$('div').live('click', function() { 

     $('div').removeClass('selected'); 
     $('div .my-text').remove(); 

     $(this).addClass('selected'); 
     $('<div class="my-text">div #' + this.id + '</div>').appendTo($(this)); 
    });