HTML-скрипт.load, предотвращающий адаптивные элементы

Question

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

Это нормально работает с обычной HTML-страницей, но, поскольку у меня несколько страниц с одинаковым верхним / нижним колонтитулом, я решил поместить весь HTML-код в отдельные файлы и загрузить их с помощью скрипта:

<script>
    // load navigation/footer
    $(function () {
        $("#navigation").load("html/nav.html");
        $("#footer").load("html/footer.html");
    });
</script>

Проблема в том, что, когда я делаю это, мой мобильный навигационный список не работает (как если бы мобильная навигационная панель инициализировалась, тогда документ загружает HTML, что не приводит к хукам). Я надеюсь, что есть простое решение для этого. Есть идеи?

Благодарю.

Answer 1

Когда ты сказал

предотвращение реагирующих элементов

Вы имеете в виду, что обработчики событий и тому подобное не привязаны к новому загруженному HTML?

---

Один из способов - установить делегированные обработчики событий.

$(document).on('click','.mylaterloadedanchors', function() { ... 

Но это слишком излишне, чтобы иметь их слишком много.

---

Еще один, посвященный контролю привязок в функции, которую вы можете вызвать после загрузки шаблонов /DOM.

• загрузить шаблоны
• установить обработчики шаблона.

Сказать,

var app = function() { 

    .. list all listeners etc
    };

/* load templates using the callback jq provides for .load() 
   and trigger the app containing the listeners*/

$('#navigation').load('html/nav.html', app);

---

Другой способ состоит в том, чтобы иметь nav.html js bindings src'd со страницы nav.html.

Неплохая идея при управлении "представлениями" - например,

nav.html корабли с nav.js так далее..

взгляды с viewmodels и viewbindings