Question

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

向用户显示5张图片。
某些视觉效果与图像绑定。
如果用户滚动到页面底部，则会加载另外5张图像。
使用<div>函数更新容器.html()的Html。
视觉效果与新的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... });

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

视觉效果的CODE：

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（selector）.append（）在元素的末尾添加新代码，而不是通过.html（）替换所有内容。这样你先前的活页夹就会结转。

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

Answer 2

± ps -ef | grep redis 501 62491 57789 0 1:45PM ttys001 0:00.37 redis-server 127.0.0.1:6379 501 62572 59388 0 1:54PM ttys002 0:00.00 grep --color=auto --exclude-dir=.bzr --exclude-dir=CVS --exclude-dir=.git --exclude-dir=.hg --exclude-dir=.svn redis销毁元素，然后创建新元素。绑定是在旧的（现在被破坏的）元素上。如果使用$().html()，则需要重新绑定。您可以使用$().html()通过 NOT 进行重新绑定，而不是使用$().html()和$().detach()对现有元素进行重新绑定。

Answer 3

你可以使用Jquery element.clone（true，true）;显然，对现有代码进行了一些更改，这应该非常容易。

jquery html（）函数删除绑定？

3 个答案: