JavaScript не работает после аутсорсинга

Я использую шаблон Multi страницы (все страницы и javascriot в одном html-файле). Я просто перестроить свою JQuery мобильных приложений:JavaScript не работает после аутсорсинга

Перед: все JavaSripts в HTML файл, например: <div data-role="page>.....<script></script> </div>
- Сейчас: все JavaScripts поручаются в отдельном файле. Но теперь приходит проблему:

Я ищу после адреса на одной странице. Каждый результат хранится в истории (localStorage). Таким образом, пользователь может использовать поиск или нажать на результаты поиска старой истории.

Поскольку я передал сценарий для этой страницы, история не работает. Я покажу вам рабочий код и рабочий код:

Рабочий код - pre outsourced: Этот код работает. 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]); 
}

источник

2014-01-11 Struct

Я не думаю, что «аутсорсинг» означает то, что вы думаете, что это значит. – Saravana

Куда вы включили файл 'function.js'? – Saravana

вы должны обернуть код в '$ (document) .on (« pageinit », function' или любое событие страницы. – Omar

Если вы не выполняете свой скрипт после того, как страница закончила загрузку, есть такие случайные запросы, как $("#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 также связывает поведение к вашей кнопке поиска, чтобы фактически обновлять историю каждый раз, когда она нажата.

источник

2014-01-11 10:26:13 jcage

Я думаю, что ваш ответ означает то же самое, что и мой комментарий 3 минуты назад, но я не нашел решения до сих пор. – Struct

часть вашей проблемы заключается в том, что ваш оператор 'if' в' function.js' выполняется в момент загрузки скрипта. Это означает, что '$ ('# lastresults')' будет ищет идентификатор, который еще не является частью дерева DOM. Оберните свой 'if' в функцию и вызовите это при событии onload или, поскольку вы используете jquery mobile, в pagecreate. – jcage

, пожалуйста, проверьте обновленный ответ и позвольте мне знать, если он проливает больше света в вашу проблему – jcage

JavaScript не работает после аутсорсинга

ответ

Смежные вопросы