Функция jquery html() удалить привязку?

Question

Я настраиваю страницу со следующими функциями:

1. Пользователю показано 5 изображений.
2. Некоторые визуальные эффекты привязаны к изображениям.
3. Если пользователь прокручивает страницу вниз, загружаются еще 5 изображений.
4. HTML контейнера <div> обновляется с помощью .html() функция.
5. Визуальные эффекты привязаны к новым 5 изображениям.

Визуальный эффект заключается в выделении некоторых предопределенных областей изображения с помощью Image Mapster.

Проблема:

Визуальные эффекты на всех предыдущих изображениях исчезают после добавления новых пяти изображений.

Вопросы:

Зовет .html() Функция удаления привязок, ранее установленных на существующих html?

Как я могу обновить html без удаления ранее установленных привязок?

Вот упрощенная версия кода:

Проверка кода при достижении нижней части страницы при прокрутке вниз:

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        console.debug("_____________ DEBUG _____________: reached bottom()");
        // check if there are images to load, if so call Visualize()
        if ( there are more images to load in a buffer)
            ShowMore();
        }
    }
});

КОД, показывающий еще 5 изображений:

function ShowMore() {
  console.debug("_____________ DEBUG _____________: in /ShowMore()");

  // get the html of the image container div
  old_html = $('#image_result_container').html();

  // ajax request to get the 5 more images from server
  $.ajax({
    url: "/GetImages/",
    type: "POST",
    contentType: "application/json",
    data: JSON.stringify({'visualize_ids': visualize_ids}),
    dataType: "json",
    success: function( response ) {

      // some complex manipulation that creates the html for the 5 images just loaded
      new_html = old_html + <div>...some stuff in here...</div>

      // I set the html of the container to the new html
      $('#image_result_container').html(new_html);

      // this part calls the ImageMapster function only on the last 5 images using an id value that I won't explain for conciseness reasons...
      for (i = 0; i < 5; i++) {
        ImageMapster( some_id, i );
      }
  });
}

Что за ImageMapster() Функция в основном привязывает функцию визуализации к элементу изображения:

var map = $('#vis_image_' + ann_id + '_' + im_count_id);
map.mapster({ all the cool effects go here... });

Я приложил ниже код для визуального эффекта (для полноты), но это не имеет значения для вопроса.

КОД для визуального эффекта:

function ImageMapster( ann_id, im_count_id ) {
  console.debug("_____________ DEBUG _____________: in /ImageMapster()");
  console.debug(" $> ann: [" + ann_id + "] im_count: [" + im_count_id + "]");
  var map = $('#vis_image_' + ann_id + '_' + im_count_id);
  map.mapster({
    areas: [
    {
      key: 'subject',
      staticState: true,
      fillColor: '6699ff',
      fillOpacity: 0.4,
      stroke: true,
      strokeColor: '6699ff',
      strokeWidth: 3
    },
    {
      key: 'object',
      staticState: true,
      fillColor: '8ae65c',
      fillOpacity: 0.4,
      stroke: true,
      strokeColor: '8ae65c',
      strokeWidth: 3
    }
    ],
    mapKey: 'name'
  });
}

Answer 1

Селекторы jQuery работают так, как они связываются с совпадениями при выполнении кода. Когда HTML-код, соответствующий селекторам, удаляется, привязка также соответствует точному коду. Не шаблон.

Самый короткий способ справиться с этим - использовать jQuery(селектор).append(), чтобы добавить новый код в конец элемента, а не заменять все с помощью.html(). Таким образом, ваши предыдущие связующие будут перенесены.

http://api.jquery.com/append/

Answer 2

$().html() уничтожает элементы, затем создает новые элементы. Привязка была на старых (ныне разрушенных) элементах. Вам нужно перепривязать, если вы используете $().html(), Вы можете обойти привязку, не используя $().html() и вместо того, чтобы использовать $().detach() а также $().attach() против ваших существующих элементов.

Answer 3

Вы можете использовать Jquery element.clone(true,true); с некоторыми изменениями в вашем существующем коде, и это должно работать очень легко.