html文件引入另一个html头文件，造成js失效，请教

其实逻辑很简单，多个html文件，共用一个header.html，使用以下js引入$(document).ready(function() {
  $("#header").load("header.html");
})问题就出现在，header文件中，有多个侧边栏 li标签，使用单独引入的js文件来切换效果$(document).ready(function() {
$('#header .nav a[data-toggle="collapse"]').on('click', function() {
if($(this).hasClass('collapsed')) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
})
})
所以我怀疑是dom树没有加载成功，js增加class就开始增加了，所以等实际dom数有元素的时候，后一段代码相当于提前运行了。
但我把后一段改成 window.onload() 貌似也没有作用，因为不想把所有的 li标签放在每个html文档内，希望通过引入header统一管理。还是请教各位大神，如何调整才能实现 正常点击（侧边栏点击动态加载class属性，以实现标签效果）。感谢