Question

I’m trying to dynamically assign a different instance of jQuery-UI’s resizable after the DOM has loaded.

I basically want to assign a fixed aspectRatio of true or false depending on certain factors. When I request a new resizable instance, it does not seem to be updating.

The selectors used to assign resizable() are also dynamically created after DOM loads.

Here is a simplified example of my code:

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>

Here is a running example: http://digitaloutback.co.uk/resizable-eg/ (press ‘change’ to assign initial resizable)

I have also used ‘live’ and ‘livequery’ plugin in place of ‘bind’ so I’m not sure what the root of the problem could be..

Found the solution

The answer was right in front of me in jQuery UI documentation:

resizable(‘destroy’) before re-assigning it.

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

Answer 1

The answer was right in front of me in jQuery UI documentation:

resizable(‘destroy’) before re-assigning it.

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