DOMがロードされた後にjQuery-UIのサイズ変更可能な別のインスタンスを動的に割り当てようとしています。
基本的に、特定の要因に応じてtrueまたはfalseの固定アスペクト比を割り当てたいと思います。新しいサイズ変更可能なインスタンスをリクエストすると、更新されていないようです。
resizable()の割り当てに使用されるセレクターも、DOMのロード後に動的に作成されます。
これが私のコードの簡単な例です:
jQuery:
$(document).ready( function() {
$('.lyr').addClass('loose');
$('.lyr2').addClass('fixed');
$('#change').bind( 'click', function() {
if( $('.lyr, .lyr2').hasClass('loose') ) {
$('.lyr, .lyr2').addClass('fixed').removeClass('loose');
$('#status').html('changed to fixed');
$('.lyr, .lyr2').resizable({
aspectRatio: true,
handles: 'all'
});
} else {
$('.lyr, .lyr2').addClass('loose').removeClass('fixed');
$('#status').html('changed to loose');
$('.lyr, .lyr2').addClass('fixed');
}
});
});
HTML:
<input type='button' id='change' value='change'>
<div id="canvas">
<p>Resizable items</p>
<div class='lyr'></div>
<div class='lyr2'></div>
</div>
実行例は次のとおりです。http://digitaloutback.co.uk/resizable-eg/(「変更」を押して最初のサイズ変更可能を割り当てます)
また、「bind」の代わりに「live」および「livequery」プラグインを使用したため、問題の原因が何であるかわかりません。
解決策を見つけました
答えは、jQueryUIドキュメントで私の目の前にありました。
再割り当てする前にresizable('destroy')。
$('.lyr, .lyr2').resizable('destroy').resizable()..