w3schoolにはHTMLが含まれています。JavaScriptは正常に動作しません。

Question

私は最近、w3school include htmlを使用していますので、同じdivをすべてのページにコピー＆ペーストする必要はありません。

まず、私はいくつかのCSSスタイルを使用するヘッダーとフッターに使用しました。問題はなく、完璧に動作します。

しかし、私はいくつかのjavascriptを含むドロップダウンNavbarのためにもう一度使ってみましたが、HTMLは含まれていましたが、javascriptは私には当てはまりませんでした！ javascriptに何も問題はありませんが、include 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>

と、ここで私はこれがある場合、私は申し訳ありませんが、スニペットの2つのHTMLページを配置する方法を知らない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> 

内部のものだからです少し混乱します

Answer 1

あなたのイベントを委任する必要がありますビーコン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.includeHTMLw3.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() 
    } 
    }) 
});