w3school包括HTML，javascript无法正常工作

所以，我最近使用w3school包含html，所以我不必将相同的div复制粘贴到我的所有页面。

首先，我使用它作为页眉和页脚，它使用一些CSS样式，它没有问题，完美的工作。

但是，然后，我试图再次使用它为我的下拉Navbar，其中包括一些JavaScript，HTML包括罚款，但我放的JavaScript不起作用！ 没有什么问题的javascript，它没有使用包含HTML时工作正常。 这是代码

$('#leftDrop1').on('click', function() { if ($('#sub1').css('display') == 'block') { $('#sub1').hide() } else { $("#sub1").show() } }) $('#leftDrop2').on('click', function() { if ($('#sub2').css('display') == 'block') { $('#sub2').hide() } else { $("#sub2").show() } }) 

这里是dropdown.html里面的内容

 
 
 
Category 1
 
 
Sub 1
 
Sub 2
 
Sub 3
 
 
Category 2
 
 
Sub 1
 
Sub 2
 
Sub 3
 
 
Category 3
 
  

我不知道如何将2个html页面放在片段上，如果这有点令人困惑，我很抱歉

Answer 1

你需要委托你的事件beacouse w3school脚本使用ajax并添加新的项目到dom

 $('body').on('click','#leftDrop1',function() { if ($('#sub1').css('display') == 'block') { $('#sub1').hide() } else { $("#sub1").show() } }) $('body').on('click','#leftDrop2',function() { if ($('#sub2').css('display') == 'block') { $('#sub2').hide() } else { $("#sub2").show() } }) 

Answer 2

现在来自w3.js的w3.includeHTML允许在加载html之后进行回调。

 w3.includeHTML(function() { $('#leftDrop1').on('click', function() { if ($('#sub1').css('display') == 'block') { $('#sub1').hide() } else { $("#sub1").show() } }) $('#leftDrop2').on('click', function() { if ($('#sub2').css('display') == 'block') { $('#sub2').hide() } else { $("#sub2").show() } }) });