javascript - HTML 脚本 .load 阻止响应元素

Question

我正在使用来自 here 的 gumby 框架一切似乎都很顺利。我想实现一个移动导航列表(链接在单个按钮下分组，详见 here)。

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

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

问题是，当我执行此操作时，我的移动导航列表不 工作(好像正在初始化移动导航栏，然后文档加载 HTML，导致没有 Hook )。我希望有一个简单的解决方法。有什么想法吗？

谢谢。

Answer 1

当你说

preventing responsive elements

您的意思是，事件处理程序等未绑定(bind)到已加载的新 HTML？

---

一种方法是设置委托(delegate)事件处理程序

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

但是拥有太多这样的东西就太过分了。

---

另一个，研究将绑定(bind)控制到一个函数中，您可以在加载模板/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 绑定(bind)。

管理“ View ”时不错的主意 - 例如

nav.html 附带 nav.js 等 ..

views with viewmodels 和 viewbindings