jquery - 为什么这个 jQuery 可调整大小的句柄在 div 更新时消失？

Question

我正在使用 jQuery UI 的可调整大小函数来调整包含图像的 div 的大小。在初始页面加载时，div 包含 someimage.png 并且调整大小可以使用下面的代码正常工作。 handle 出现在右下角，我可以单击并拖动它来调整 div 的大小。

 jQuery("#imgdiv").resizable();

  <div id="imgdiv" class="ui-widget-content">
    <img src="someimage.png" />
  </div>

然后我提交一个表单，并使用 ajax 从 Rails 服务器获取新图像:

 page.replace_html 'imgdiv', "<img src=\"newimg.png\">"

这会使用新图像更新 div，但可调整大小的 handle 消失，我无法再调整 div 的大小。你知道为什么会这样吗？谢谢。

Answer 1

可调整大小的界面是通过将 DIV 添加到您要调整大小以实现 UI 元素的 DIV 来生成的。当您替换 html 时，您还将用 UI 元素替换生成的内容。我认为您需要在替换 HTML 后重新运行 resizeable() 代码。

生成的 HTML(应用 resizeable() 方法后)如下所示(改编自 jQuery docs )。它是被删除的内部 DIV。

<div class="ui-widget-content ui-resizable">
   <img src="someimage.png" />  <!-- your original code -->
   <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-e"></div>
   <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-s"></div>
   <div unselectable="on" style="z-index: 1001; -moz-user-select: none;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>

</div>