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-resizable-se or .ui-resizable-e when page load, functions will work, but if you hover again, nothing will be happened. How can I overcome this problem?

  $('#resizable').resizable({
    aspectRatio:false
  });
  $('.ui-resizable-se').hover(function(){
    keep("resizable");
  });
  $('.ui-resizable-e').hover(function(){
    dontKeep("resizable");
  });

Source link: http://jsfiddle.net/nNrgP/

回答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.

回答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");
}

回答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

来源：https://stackoverflow.com/questions/18027887/jquery-resizable-live