脚本发射两次

问题描述：

我一直在努力寻找解决方案。脚本发射两次

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

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

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

它在移动但在桌面视图它没有加载李的。我也尝试过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>

我希望脚本桌面和移动工作，只加载力的一次。有什么建议么？感谢

为什么你通过''

'+ cells [1] +'

''并将它插入到html中，只需传递'cells [1]'？ – 2014-10-20 13:35:18

有很多HTML之间的李我的大部分，因为它更容易阅读代码的方式。 – Neb9 2014-10-20 13:40:54

答

试着改变你的功能

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); 
}

嗨，试过了，我仍然在手机上获得了li的两次加载。我认为这个问题是jquery mobile两次启动脚本。 – Neb9 2014-10-20 13:56:22

答

好，我知道它的工作。尝试了很多不同的方法来使用JQuery调用函数，所有这些方法导致脚本运行两次后，我决定尝试使用纯JavaScript，并且它工作正常！我改变了函数调用

window.onload = function(){ 
};

而现在只加载脚本once.I'm不知道这是否是做的最好的方式，但它的工作原理。

相关推荐