0

我正在使用gumby frameworkfrom here，一切似乎都很顺利。我想实现一个移动导航列表（链接分组在一个按钮下，详见此处）。

这适用于普通的 HTML 页面，但由于我有多个具有相同页眉（导航栏）/页脚的页面，我决定将所有 HTML 放在单独的文件中，并使用脚本加载它们：

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

问题是当我这样做时，我的移动导航列表不起作用（好像移动导航栏正在初始化，然后文档加载 HTML 导致没有钩子）。我希望有一个简单的解决方法。有任何想法吗？

谢谢。

4

1 回答 1

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从 nav.html 页面本身获取 js 绑定。

管理“视图”时不是一个坏主意 - 例如

nav.html附带nav.js等..

具有视图模型和视图绑定的视图

于 2014-04-12T18:01:22.460 回答