在 iScroll 中复制 LI 元素上的点击事件

Duplicate onClick events on LI element in iScroll

本文关键字：事件 元素 iScroll 复制 LI      更新时间：2023-09-26

这是我的代码。当我调用这个函数时，iScroll（） 在更改页面后在 LI 元素上添加了重复事件。

function collectionOffen(asseID, imgsInFile) {
  $("#thelist").empty();
  // append image files into slider div.. 
  for (var imgPageCnt = 0; imgPageCnt <= imgsInFile; imgPageCnt++) {
      var html = "";
      html += "<li id=" + imgPageCnt + ">";
      html += "<img src='" + preThmb + "'>";
      html += "</li>";
      $("#thelist").append(html);
      funcPreImg = function () {
          previewImageBackside(asseID);
      }
      document.getElementById(imgPageCnt).addEventListener("click", funcPreImg);
  }
  $("#thelist").listview("refresh");
  $.mobile.changePage("#collectionOfFiles", {
      transition: "slide",
      reverse: true
  });
  var myScroll = new iScroll('wrapper');
}

告诉我解决方案（如果有的话）。

重复事件是 JQM 中的常见问题。

试试这个（未测试的大脑代码）：

$(document).on('pageinit', function () {
  $("#thelist").empty();
  // append image files into slider div.. 
  for (var imgPageCnt = 0; imgPageCnt <= imgsInFile; imgPageCnt++) {
      var html = "";
      html += "<li id='" + imgPageCnt + "' class='imgClass'>";
      html += "<img src='" + preThmb + "'>";
      html += "</li>";
      $("#thelist").append(html);
  }
  //is 'asseID' defined in this context?
  $(document).on('click', '.imgClass', function (e) {
      if(e.handled !== true)
      {
          previewImageBackside(asseID);
          e.handled = true;
      }
  });
  $("#thelist").listview("refresh");
  $.mobile.changePage("#collectionOfFiles", {
      transition: "slide",
      reverse: true
  });
  var myScroll = new iScroll('wrapper');
});

这应该仅在页面初始化时添加列表元素。

还把你的JavaScript函数改成了一个更好、性能更好的jQueryCall。

您在"<li id='" + imgPageCnt + "'>"中也有错别字，缺少引号

我找到了解决方案。渲染图像后销毁 iScroll 对象。

前任：-
var myScroll = new iScroll（'wrapper'）; myScroll.refresh（）; myScroll.destroy（）;

以 myScroll 作为静态变量来销毁对象。

相关文章：