jquery html() 函数删除绑定？

Question

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

向用户显示 5 张图片。
图像绑定了一些视觉效果。
如果用户滚动到页面底部，则会加载另外 5 张图片。

.html()

<div>

Html。
视觉效果绑定到新的 5 张图片。

视觉效果是突出显示图像的一些预定义区域，使用Image Mapster。

问题：

The visual effects on all previous images disappear after I add the new five images.

问题：

Does calling the .html() function remove bindings previously set on the existing html?

How can I update the html without removing previously set bindings?

这里是代码的简化版本：

检查向下滚动是否到达页面底部的代码：

$(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选择器匹配的HTML时，匹配确切代码时的绑定也是如此。不是图案。

处理此问题的最短方法是使用 jQuery(selector).append() 在元素末尾添加新代码，而不是通过 .html() 替换所有内容.这样你以前的活页夹就会继续使用。

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

Answer 2

$().html() 销毁元素，然后创建新元素。绑定是在旧的（现已销毁的）元素上。使用$().html()需要重新绑定。您可以通过 NOT 使用 $().html() 而不是对现有元素使用 $().detach() 和 $().attach() 来绕过重新绑定。

Answer 3

可以使用Jquery element.clone(true,true);显然对您现有的代码进行了一些更改，这应该很容易工作。

jquery html() 函数删除绑定？

jquery html() function remove binding?

html

javascript

css

jquery

imagemapster