jquery ()函数删除绑定？

Question

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

1. 用户显示5幅图像。
2. 一些视觉效果被绑定到图像。
3. 如果用户滚动到页面底部，另有5个图像将被加载。
4. 使用<div>函数更新容器.html()的Html。
5. 视觉效果被绑定到新的5幅图像。

视觉效果是使用图像映射器突出显示图像的某些预定义区域。

问题：

所有以前的图像的视觉效果消失后，我添加了新的五个图像。

问题：

调用.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

您可以使用jQueryelement.clone(真，真)；显然，对现有代码做了一些更改，这应该非常容易。