Question

我正在使用here中的gumby framework，一切似乎进展顺利。我想实现一个移动导航列表（其中链接按照单个按钮分组，详细here）。

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

<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绑定来自nav.html页面本身的src＆＃39; d。

管理观看次数并不是一个坏主意。 - 例如

nav.html附带nav.js等..

使用 viewmodels 和 viewbindings

观看

HTML脚本.load阻止响应元素

1 个答案: