Javascript jquery html（）函数是否删除绑定？

我正在设置具有以下功能的页面：

向用户显示5幅图像

一些视觉效果绑定到图像

如果用户滚动到页面底部，则会加载另外5个图像

使用

.Html（）

函数更新容器的Html

视觉效果绑定到新的5个图像

视觉效果是使用高亮显示图像的某些预定义区域

问题：

$(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();
        }
    }
});

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 );
      }
  });
}

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'
  });
}

添加新的五幅图像后，所有以前图像上的视觉效果都消失了

问题：

$(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();
        }
    }
});

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 );
      }
  });
}

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'
  });
}

调用

.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();
        }
    }
});

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 );
      }
  });
}

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'
  });
}

显示5张以上图像的代码：

$(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();
        }
    }
});

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 );
      }
  });
}

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'
  });
}

我在下面附上了视觉效果的代码（为了完整性），但这对问题来说并不重要

视觉效果代码：

$(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();
        }
    }
});

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 );
      }
  });
}

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'
  });
}

---

jQuery选择器的工作方式是在代码运行时绑定到匹配项。当选择器匹配的HTML被删除时，绑定也会被删除，因为它们与确切的代码匹配。不是模式

处理此问题的最短方法是使用jQuery（selector）.append（）在元素末尾添加新代码，而不是通过.html（）替换所有内容。这样你以前的活页夹就可以保存下来了

---

$（）.html（）

销毁元素，然后创建新元素。绑定在旧的（现在已销毁的）元素上。如果使用

$（）.html（）

，则需要重新绑定。您可以通过对现有元素使用

$（）.html（）

而不是

$（）.detach（）

和

$（）.attach（）

来避免重新绑定；显然，对现有代码进行了一些更改，这应该很容易操作。

是的，当您使用新的HTML更新内容时，DOM的这一部分将完全重建，并且对任何删除的DOM元素所做的操作都不会产生任何效果。@Pointy-感谢您提供的信息！您有解决方案吗？您可以使用单个外部容器，然后在每批图像中附加新的

子容器。添加新内容不会影响以前的内容。