Question

我正在使用多页面模板（所有页面和javascriot在一个html文件中）。我只是重构我的jQuery移动应用程序：

之前：html文件中的所有JavaSripts，例如： <div data-role="page>.....<script></script> </div>
- 现在：所有JavaScripts都在自己的文件中外包。但现在出现问题：

我在一页上搜索地址。每个结果都存储在历史记录中（localStorage）。因此，用户可以使用搜索或点击旧的历史搜索结果。

由于我将此页面的脚本外包，因此历史记录不起作用。我将向您展示工作代码和无效代码：

工作代码 - 预先外包： 这段代码有效。 JavaScript位于页面div：

<div data-role="page" id="searchPage" class="bg-light">

    <div data-role="content">

        <div id="content-search">
            <p><input type="text" name="address" id="address" class="stored" value="" /></p>
            <p><input type="submit" id="submitAddress" value="Search" data-theme="a" data-corners="false" /></p>
        </div>

        <div id="searchHistory">
            <div class="ui-corner-all custom-corners">
                <div class="ui-bar ui-bar-c">
                    <h3>History:</h3>
                </div>
                <div class="ui-body ui-body-c">
                    <div id="lastResults" class="ui-body ui-body-c ui-corner-all"></div>
                </div>
            </div>  
        </div>  

    </div>

    <script>
    ......
    // check and show previous results in **lastResults** div
    if (localStorage.getItem("history") != null) {
        var historyTemp = localStorage.getItem("history");
        var oldhistoryarray = historyTemp.split("|");

        oldhistoryarray.reverse();

        $("#lastResults").empty();
        jQuery.each( oldhistoryarray, function( i, val ) {
            $("#lastResults").append(
                "<ul data-role=\"listview\" data-inset=\"true\" >" +
                    // store history in localStorage
                    "<li><a href=\"#mapPage\" onClick=\"getHistory("+i+");\" >"+oldhistoryarray[i]+"</a></li>" +
                "</ul>"
            );
            // max. history
            if (i==3) {
                return false;
            }
        });


    } else {
        // hide search history
        console.log("no history");
        $("#searchHistory").hide();
    }

    function getHistory(i){
        localStorage.setItem('address', oldhistoryarray[i]); 
    }

    </script>

</div>

不工作的代码 - JS在自己的文件中外包： JavaScript现在在自己的文件（function.js）中：的的index.html： 细节代码见上文

<div data-role="page" id="searchPage" class="bg-light">

    <div data-role="content">

    </div>

    <script></script>

</div>

function.js：

// check and show previous results in **lastResults** div
if (localStorage.getItem("history") != null) {
    var historyTemp = localStorage.getItem("history");
    var oldhistoryarray = historyTemp.split("|");

    oldhistoryarray.reverse();

    $("#lastResults").empty();
    jQuery.each( oldhistoryarray, function( i, val ) {
        $("#lastResults").append(
            "<ul data-role=\"listview\" data-inset=\"true\" >" +
                // store history in localStorage
                "<li><a href=\"#mapPage\" onClick=\"getHistory("+i+");\" >"+oldhistoryarray[i]+"</a></li>" +
            "</ul>"
        );
        // max. history
        if (i==3) {
            return false;
        }
    });


} else {
    // hide search history
    console.log("no history");
    $("#searchHistory").hide();
}

function getHistory(i){
    localStorage.setItem('address', oldhistoryarray[i]); 
}

Answer 1

如果您在页面加载完成后没有执行脚本，则$("#searchHistory")之类的查询可能会返回为空。

确保在onload事件中调用的回调中执行脚本。

所以我建议这样的事情（请检查你是否初始化了你的“历史”）

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>

<script src="function.js"></script>

<script>

$(document).on( "pagecreate", function( event ) {
  console.log("page created")


    $('#submitAddress').on('click',function(){
        makeHistory();
    })

});

</script>
</head>

<body>
<div data-role="page" id="searchPage" class="bg-light">

    <div data-role="content">

        <div id="content-search">
            <p><input type="text" name="address" id="address" class="stored" value="" /></p>
            <p><input type="submit" id="submitAddress" value="Search" data-theme="a" data-corners="false" /></p>
        </div>

        <div id="searchHistory">
            <div class="ui-corner-all custom-corners">
                <div class="ui-bar ui-bar-c">
                    <h3>History:</h3>
                </div>
                <div class="ui-body ui-body-c">
                    <div id="lastResults" class="ui-body ui-body-c ui-corner-all"></div>
                </div>
            </div>  
        </div>  

    </div>

</div>
</body>
</html>

function.js然后就是

// check and show previous results in **lastResults** div

function makeHistory()
{
if (localStorage.getItem("history") != null) {
    var historyTemp = localStorage.getItem("history");
    var oldhistoryarray = historyTemp.split("|");

    oldhistoryarray.reverse();

    $("#lastResults").empty();
    jQuery.each( oldhistoryarray, function( i, val ) {
        $("#lastResults").append(
            "<ul data-role=\"listview\" data-inset=\"true\" >" +
                // store history in localStorage
                "<li><a href=\"#mapPage\" onClick=\"getHistory("+i+");\" >"+oldhistoryarray[i]+"</a></li>" +
            "</ul>"
        );
        // max. history
        if (i==3) {
            return false;
        }
    });


} else {
    // hide search history
    console.log("no history");
    //and you probably need to initialize your history here, something like
    localStorage.setItem("history", "lalala");
    $("#searchHistory").hide();
}

}

function getHistory(i){
    localStorage.setItem('address', oldhistoryarray[i]); 
}

现在，pagecreate事件还会将行为绑定到搜索按钮，以便在每次单击时实际更新历史记录。

外包后JavaScript不起作用

1 个答案: