Метод включения jQuery не работает

Поскольку мой сайт имеет только одну страницу, и index.html становилось очень длинным и невозможным для чтения. Поэтому я решил разместить каждый раздел в другом файле HTML и использовать jQuery для его включения.Метод включения jQuery не работает

Я использовал jQuery в том виде, как было упомянуто here, чтобы включить внешний файл HTML, но, по-видимому, он не работает на моем сайте. Я действительно не знаю, в чем проблема.

Here - ссылка моей рабочей области.

Вот что я делаю в index.html файл, чтобы включить другие разделы

<script src="./js/jquery-1.11.1.min"></script> 
<script> 
    $(function() { 
     $("#includedContent").load("./page1.html"); 
    }); 
</script> 
<script> 
    $(function() { 
     $("#includedContent").load("./page2.html"); 
    }); 
</script> 
<script> 
    $(function() { 
     $("#includedContent").load("./page3.html"); 
    }); 
</script> 
<script> 
    $(function() { 
     $("#includedContent").load("./page4.html"); 
    }); 
</script> 
<script> 
    $(function() { 
     $("#includedContent").load("./page5.html"); 
    }); 
</script> 
<script> 
    $(function() { 
     $("#includedContent").load("./page6.html"); 
    }); 
</script> 
<script> 
    $(function() { 
     $("#includedContent").load("./page7.html"); 
    }); 
</script>

Я также использовал this метод, чтобы убедиться, что файл доступен, и все было в порядке. Таким образом, проблема заключается не в доступности файлов

источник

2014-11-05 Apha

Обновлен ли браузер, удалив кеш? – Chakra

Да. и все еще не работает. –

удалите '. /' И попробуйте еще раз. –

Вы перезаписать содержимое #includedContent семь раз (см документацию jQuery.load) не .js. С AJAX нет гарантии, что запрос будет завершен первым, чтобы в конечном итоге вы попали в содержимое случайных страниц.

Решение заключается в создании контейнеров для каждой страницы и загружать каждую страницу в своем специальном контейнере, что-то вроде этого:

<div id="includedContent"> 
    <div class="page1"></div> 
    <div class="page2"></div> 
    <div class="page3"></div> 
</div>

$(document).ready(function() { 
    $("#includedContent .page1").load("page1.html"); 
    $("#includedContent .page2").load("page2.html"); 
    $("#includedContent .page3").load("page3.html"); 
});

NB: Сказав все это, я не понимаю, как AJAX решает проблема слишком длинная или невозможная для чтения.

источник

2014-11-05 08:32:28

Вы УДИВИТЕЛЬНЫ !!! Огромное спасибо. – Apha

Есть несколько вещей, которые выглядят странно для меня:

все ваши функции нагрузки работать на документ готовы, что странно, имея все ту же цель , loadзаменяет (не добавляет) содержание выбранного элемента с тем, что загружаются, вы, вероятно, пытаетесь добавить все содержимое HTML, но текущая установка будет на самом деле просто загрузить page7.html в #includedContent
путь выглядит странно для меня, я думаю, ./ может привести к ошибкам, попробуйте оставить вне ./ всюду.
вместо загрузки всей страницы HTML, вы можете просто хотите, чтобы загрузить часть этого файла (я не знаю, как pageX.html выглядит), например, вы не хотите, чтобы загрузить <html> узел целиком, а содержание только : .load('page1.html #content')
Вы включили jquery правильно? нет в вашем включении

источник

2014-11-05 08:24:57 Alex

Метод включения jQuery не работает

ответ

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