Question

我正在使用jQuery UI的可调整大小的函数来调整包含图像的div的大小。在初始页面加载时，div包含someimage.png，并且调整大小可以正常使用下面的代码。手柄出现在右下角，我可以单击并拖动它来调整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，但可调整大小的句柄消失，我无法再调整div的大小。你知道为什么会这样吗？感谢。

Answer 1

可调整大小的界面是通过将DIV添加到DIV来生成的，您可以调整其实现UI元素的可调整大小。当您替换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>

Answer 2

这是因为你创建句柄的DOM元素被销毁并作为回发的一部分被替换，你需要在请求完成后再次调用jQuery("#imgdiv").resizable();。

当div更新时，为什么这个jQuery resizable句柄会消失？

2 个答案: