Блог

Я пытаюсь динамически назначить другой экземпляр jQuery-UI с изменяемым размером после загрузки DOM.

Я в основном хочу назначить фиксированный аспект 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 / (нажмите «Изменить», чтобы назначить начальный экземпляр с изменяемым размером)

Я также использовал плагин ‘live’ и ‘livequery’ вместо ‘bind’, поэтому я не уверен, в чем может быть причина проблемы..

Найдено решение

Ответ был прямо передо мной в документации jQuery UI:

изменять размер (‘уничтожить’) перед его повторным назначением.

 $('.lyr, .lyr2').resizable('destroy').resizable()..
  

Ответ был прямо передо мной в документации jQuery UI:

изменять размер (‘уничтожить’) перед его повторным назначением.

 $('.lyr, .lyr2').resizable('destroy').resizable()..