JS не запускается при первой загрузке HTML-страницы

Функция javascript не запускается при первой загрузке HTML-страницы. Однако, если я обновляю страницу, скрипт работает нормально.

Описание :

На моей индексной странице есть кнопка, которая указывает на HTML-страницу showdata. Проблема в том, что когда я нажимаю кнопку на странице индекса, я вижу (в URL-адресе), что страница showdata.html загружена, но код JS не запускается (поскольку я не вижу никаких предупреждений).

Однако, если я обновляю страницу или нажимаю URL-адрес вручную, JS работает нормально, и я вижу предупреждения.

Пробовал это в Chrome и Firefox и получил одинаковые результаты в обоих местах.

Если я не ошибаюсь, $(function() является сокращением для $(document).ready. В любом случае, я пробовал использовать оба синтаксиса, но результаты одинаковы.

Текущий код страницы:

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

<script type="text/javascript"> 
    $(function() { alert("hello"); });
</script>
</head>
  <body></body>
</html>

Я не вижу окно ожидаемого предупреждения при первой загрузке страницы. Когда я перезагружаю страницу, предупреждение приходит, как и ожидалось.

Обновлять:

Я очистил кеш, но безрезультатно.

Кроме того, когда я удаляю

<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

со страницы index, где присутствует ссылка на мою текущую страницу, JS правильно запускается при первой загрузке страницы showdata.html. Однако это приводит к потере стиля на странице индекса.


javascript html jquery webpage
person varuog    schedule 14.08.2014    source источник
comment
Я рекомендую поместить это в JSFiddle для целей отладки. Так что, даже если вы поместите console.log вне метода get(), он не появится?   -  person Zhouster    schedule 14.08.2014
comment
Кажется, на вашей странице showdata.html есть ошибка. Не могли бы вы также добавить свой HTML.   -  person yeshansachithak    schedule 14.08.2014
comment
Данные не загружаются или манипулирование DOM не выполняется? Выполните дополнительную отладку, чтобы определить, в чем проблема, и упростите код (вам действительно нужна вся эта конструкция HTML, чтобы проиллюстрировать проблему?)   -  person Chris Martin    schedule 14.08.2014
comment
Обновлена ​​упрощенная версия моего кода. Результаты все те же. @Крис-Мартин   -  person varuog    schedule 14.08.2014
comment
Судя по вашему новому коду, вы загружаете кэшированную страницу. Если вы также используете PHP, проверьте настройки кеша заголовков и, возможно, попробуйте без кеша.   -  person EternalHour    schedule 14.08.2014
comment
Также убедитесь, что вы очищаете историю браузера во время тестирования :)   -  person EternalHour    schedule 14.08.2014

Ответы (1)


arrow_upward
2
arrow_downward

Внутри вашего .get убедитесь, что вы указываете тип данных. Добавляя ваше «обновление» в .done, он сообщает AJAX подождать, пока после успешного вызова перезагрузить таблицу, я считаю, что это сработает. Еще одна вещь, которую вы можете попробовать, это поместить javascript после вашего </table> в теле, чтобы таблица HTML всегда загружалась первой.

<script type="text/javascript">
$(function() {
    jQuery.get('filename.txt', function(data) {
    var lines = data.split("\n");  
    var newrow = "";
    for (var i = 0, len = lines.length; i < (len-1); i=i+2) {
        newrow = "<tr><td>"+lines[i]+"</td>"+"<td>"+lines[i+1]+"</td></tr>";   
        $('#tableoverview').find('tbody:last').append(newrow);
        }
    },'text').done(function() {
                $("#tableoverview").table("refresh");
            });
}); 
</script>

Вы также можете попробовать $(document.body).ready, который не должен выполняться до тех пор, пока тело не загрузится.

<script type="text/javascript">
$(document.body).ready(
    $(function() {
        jQuery.get('filename.txt', function(data) {
        var lines = data.split("\n");  
        var newrow = "";
        for (var i = 0, len = lines.length; i < (len-1); i=i+2) {
            newrow = "<tr><td>"+lines[i]+"</td>"+"<td>"+lines[i+1]+"</td></tr>";   
            $('#tableoverview').find('tbody:last').append(newrow);
            }
        $("#tableoverview").table("refresh");
        });
    });
);
</script>

ИЗМЕНИТЬ:

Я провел некоторое исследование по этому вопросу, и, похоже, вы используете сочетание виджета таблицы и виджета таблицы перекомпоновки .table("refresh");.
Вы пробовали удалить это и использовать вместо него .table("reflow"); вместе с <table data-role="table" id="tableoverview" data-mode="reflow" class="ui-responsive table-stroke">?

person EternalHour    schedule 14.08.2014
comment
Я пробовал альтернативы, которые вы упомянули, но безрезультатно. Использование .load и/или $(document.body).ready вообще не загружает таблицу, даже после ее обновления. А что касается .table(reflow); вместе с data-mode=reflow это тоже не помогло, и результаты остались прежними - т.е. таблица загружается только после перезагрузки страницы. - person varuog; 14.08.2014
comment
Кажется, что функция, которую я вам дал, неверна, поэтому я отредактировал свой ответ. Это должно быть .post, а не .load, но это не будет работать с вашим текущим синтаксисом. - person EternalHour; 14.08.2014
comment
Моя последняя попытка, см. мой первый ответ, где я обновил },'text'); - person EternalHour; 14.08.2014
comment
Спасибо за помощь. Я упростил свой код, чтобы отображать только предупреждение в JS, и это тоже не работает при загрузке первой страницы. Ваша помощь будет оценена по достоинству. Спасибо. - person varuog; 14.08.2014