JQuery Resizable .Live()

When I try to destroy resizable div, hover function on .ui-resizable-se doesn't work. I think I have to use jquery live(). But I couldn't integrate it clearly. If you hover .ui-res

Solution 1:

The hovers do not work after the first time because you've called resizable("destroy"); Calling that

Removes the resizable functionality completely. This will return the element back to its pre-init state.

Resizable Destroy

If you want that to still be available, you should either toggle between resizable("disable") and resizable("enable"), or completely re-init the resizable div. Without more knowledge of your goal (or other code), it's tough to tell what the best option is.

Solution 2:

You could also just update the options:

function dontKeep(val){
    $("#"+val).resizable("option", 'aspectRatio', false);
    alert("dont keep");
}
function keep(val){
    $("#"+val).resizable("option", 'aspectRatio', true);
    alert("keep");
}

Solution 3:

Try using event delegation since you might be dealing with dynamic eleemnts

$(document).on('mouseenter mouseleave', '.ui-resizable-e', function(){
    dontKeep("resizable");
});

$(document).on('mouseenter mouseleave', '.ui-resizable-se', function(){
    keep("resizable");
});

Demo: Fiddle