Почему этот дескриптор изменяемого размера jQuery исчезает при обновлении div?

Question

Я использую функцию изменения размера jQuery UI для изменения размера div, содержащего изображение. При начальной загрузке страницы div содержит someimage.png, а изменение размера отлично работает с кодом ниже. Дескриптор появляется в правом нижнем углу, и я могу щелкнуть и перетащить его, чтобы изменить размер div.

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

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

Затем я отправляю форму, и новое изображение извлекается с сервера rails с помощью ajax:

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

Это обновляет div с новым изображением, но дескриптор изменяемого размера исчезает, и я больше не могу изменить размер div. Вы знаете, почему это может быть? Спасибо.

Answer 1

Интерфейс с изменяемыми размерами создается путем добавления DIV в DIV, который вы делаете изменяемым с помощью элементов UI. Когда вы заменяете html, вы также заменяете созданный контент элементами UI. Я думаю, вам нужно перезапустить код resizeable () после замены HTML.

Сгенерированный 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(); после завершения запроса.