Question

所以，我最近使用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()
  }
})

<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里面的内容

<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页面放在片段上，如果这有点令人困惑，我很抱歉

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.includeHTML的w3.js允许在加载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()
    }
  })
});

w3school包含HTML，javascript无效

2 个答案: