HTML 脚本 .load 阻止响应式元素

Question

我正在使用来自here 的gumby framework，一切似乎都很顺利。我想实现一个移动导航列表（其中链接被分组在一个按钮下，详细here）。

这适用于普通的 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 页面本身获取您的 nav.html js 绑定。

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

nav.html 附带nav.js 等..

views 与 viewmodels 和 viewbindings