如何在不破坏子可调整大小的情况下销毁可调整大小的 jquery？答案

【问题标题】：How do I destroy a jquery resizable without destroying child resizables?如何在不破坏子可调整大小的情况下销毁可调整大小的 jquery？
【发布时间】：2012-05-14 19:09:16
【问题描述】：

我有一个可调整大小（仅宽度）的父 div - 在此 div 中我有许多其他 div 也可调整大小（仅高度）。

有时我想禁用或破坏父宽度调整大小，但保留内部高度调整大小。

当我调用 $("#idTopDiv").resizable("destroy"); 时，这也会破坏所有子 div 上的可调整大小。

典型的布局是：-

<div id=idDivTop> <!-- Resizable width -->
    <div id=idInnerOne>
    </div>

    <div id=idInnerTwo> <!-- Resizable height -->
    <div>
</div>

欣赏任何想法。

【问题讨论】：

您是否再次尝试在子 div 上调用 .resizable？

标签： jquery user-interface destroy resizable

【解决方案1】：

我认为发生这种情况是因为 resizable 的销毁删除了 ui 元素内的所有调整大小句柄，这恰好包括内部可调整大小的调整大小句柄。所以内部可调整大小实际上并没有被破坏，它们只是被搞砸了。

可以看Resizable源码here；它发生在第 199 行，上面写着.find('.ui-resizable-handle').remove();。

要解决此问题，您还需要在内部可调整大小上调用 destroy 方法，然后重新创建它们。 (jsfiddle)

$("div").resizable();

// Destroy all three resizables
$("div").resizable("destroy");

// Recreate the inner resizables
$("#idInnerOne, #idInnerTwo").resizable();

您需要这样做以删除可调整大小在创建时设置的绑定和数据，否则当您尝试重新创建它时它会认为它已经创建并且它什么都不做。

您也可以考虑禁用外部可调整大小而不是销毁它，但是has its own issues。

【讨论】：

谢谢贾斯汀。大概 .find 应该是 .children(".ui-resizable-handle").remove();