Question

我一直在努力寻找解决方案。

我有适用于所有设备的页面，在桌面上加载jQuery，在移动设备上切换到jQuery mobile。

我在页面上有一个脚本，它从csv文件加载信息并创建一个li列表，但它运行不正常但由于某些原因，在移动设备上它会加载li列表两次。我试过了

$("#wrapper").live('pageinit', function() {
  // more stuff
});

它适用于移动设备，但在桌面视图中它没有加载li。我也尝试过document.ready但是li仍然在移动版中加载了两次。

这是代码： -

  <div>
  <form method="post" class="right">
      <div class="accnt_cont" >
      <div id="top5productlist" data-role="page" data-dom-cache="false">
      <div class="banner">
      <h2>View All Top 5</h2>
      </div>
      <ul id="tfive" class="listing">
       &nbsp;   
      </ul>
      </div>
      <!-- /#producttabs --> <!-- include return_policy.cont.inc.html ENDS --></div>
      <!-- /.accnt_cont -->
  </form>
  </div>
  <script>
  (function() {

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = handleStateChange;
    xhr.open("GET", "example-data.csv");
    xhr.send();
    //display("Request sent");

    function handleStateChange() {
      if (xhr.readyState == 4 &&
          xhr.status >= 200 &&
          xhr.status < 300) {
        //display("Got response");
        showData(xhr.responseText);
      }
    }

    function showData(data) {
      var rows = data.split(/\n/);
      var rowNum;
      var cells;
      var cellNum;

      for (rowNum = 1; rowNum < rows.length; ++rowNum) {
        cells = rows[rowNum].split(",");  
          display('<li>' + cells[1] + '</li>');
      }
    }

    function display(msg) {
      var p = document.createElement('li');
      p.innerHTML = String(msg);
      document.getElementById("tfive").appendChild(p);
    }
  })();
  </script>

我希望脚本可以在桌面和移动设备上运行，只需加载一次。有什么建议？感谢

Answer 1

尝试将您的功能更改为

function showData(data) {
  var rows = data.split(/\n/);

  for (var rowNum = 1; rowNum < rows.length; ++rowNum) {
    var cells = rows[rowNum].split(",");  
      display(cells[1]);
  }
}

function display(msg) {
  var p = document.createElement('li');
  p.innerHTML = msg;
  document.getElementById("tfive").appendChild(p);
}

Answer 2

好的，让它上班。尝试了很多不同的方法来使用JQuery调用函数后，所有这些都导致脚本运行两次，我决定尝试普通的javascript并且它有效！我将函数调用更改为

window.onload = function(){
};

现在它只加载一次脚本。我不确定这是否是最好的方法，但它有效。

脚本射击两次

2 个答案: