jQuery 可调整大小的 .Live()答案

【问题标题】：jQuery resizable .Live()jQuery 可调整大小的 .Live()
【发布时间】：2013-08-03 00:05:44
【问题描述】：

当我尝试销毁可调整大小的 div 时，.ui-resizable-se 上的悬停功能不起作用。我想我必须使用 jquery live()。但我无法清晰地整合它。

如果您在页面加载时将鼠标悬停在 .ui-resizable-se 或 .ui-resizable-e 上，功能将起作用，但如果再次悬停，则不会发生任何事情。我该如何克服这个问题？

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

来源链接：http://jsfiddle.net/nNrgP/

【问题讨论】：

live 在 1.7 版中已弃用，并在 1.9 版中被删除。你应该改用on。

标签： javascript jquery-ui jquery resizable

【解决方案1】：

第一次后悬停不起作用，因为您调用了 resizable("destroy"); 调用它

完全删除可调整大小的功能。这将使元素返回到它的预初始化状态。

Resizable Destroy

如果您希望它仍然可用，您应该在resizable("disable") 和resizable("enable") 之间切换，或者完全重新初始化可调整大小的 div。如果不了解您的目标（或其他代码），就很难判断最佳选择是什么。

【讨论】：

【解决方案2】：

您也可以只更新options:

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

【讨论】：

【解决方案3】：

尝试使用事件委托，因为您可能正在处理动态元素

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

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

演示：Fiddle

【讨论】：