w3school包含HTML,javascript无效 [英] w3school include HTML, javascript not working
问题描述
所以,我最近使用w3school包含html,所以我不必将相同的div复制粘贴到我的所有页面。
So, I recently used w3school include html, so that i dont have to copy-paste same div to all my pages.
首先,我将它用于页眉和页脚,它使用了一些CSS样式,它没有问题,效果很好。
First, i used it for header and footer, which uses some CSS styling, and it has no problem, works perfectly.
但是,然后,我尝试再次使用它为我的下拉Navbar,其中包括一些javascript,HTML包括罚款,但我放的JavaScript不起作用! javascript没有任何问题,当我不使用包含HTML时,它工作正常。这是代码
But then, i tried to use it again for my dropdown Navbar, which include some javascript, the HTML got included fine, but the javascript that i put doesnt work ! Nothing is wrong with the javascript, it works fine when I didn't use the include HTML. Here's the code
$('#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()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<div w3-include-html="dropdown.html"></div>
这里是dropdown.html里面的内容
and here's what inside the dropdown.html
<div class="col-lg-3">
<ul id="dropKiri">
<li id="leftDrop1"><a class="dropIcon"><i class="fa fa-caret-right" aria-hidden="true"></i></a>Category 1</li>
<div id="sub1"><ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul></div>
<li id="leftDrop2"><a class="dropIcon"></a><i class="fa fa-caret-right" aria-hidden="true"></i></a>Category 2</li>
<div id="sub2"><ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul></div>
<li style="list-style-type: none;">Category 3</li>
</ul>
</div>
我不知道如何将2个html页面放在片段上,对不起,如果这有点令人困惑
I dont know how to put 2 html pages on snippet, i'm sorry if this is a bit confusing
推荐答案
您需要委托您的事件beacouse w3school脚本使用ajax并将新项目添加到dom
You need to delegate your events beacouse w3school script uses ajax and adds new items to the 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()
}
})
这篇关于w3school包含HTML,javascript无效的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!