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作为静态变量来销毁对象。

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

2 个答案: