javascript - iScroll 中 LI 元素上的重复 onClick 事件

Question

这是我的代码。当我调用此函数时，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');
}

有的话告诉我解决办法。。

Answer 1

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

试试这个（untestet braincode）：

$(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 + "'>"，缺少引号

Answer 2

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

例如：-
var myScroll = new iScroll('wrapper'); myScroll.refresh(); myScroll.destroy();

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