w3school包括HTML，JavaScript不工作

所以，我最近使用w3school包括HTML，這樣我就不必複製粘貼同一個div到我的所有頁面。w3school包括HTML，JavaScript不工作

首先，我將它用於頁眉和頁腳，它使用了一些CSS樣式，它沒有問題，完美地工作。

但是，然後，我試圖再次使用它爲我的下拉導航欄，其中包括一些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頁面裏面有什麼，我很抱歉，如果這是有點令人困惑

來源

2016-06-24 Ricky Gani

你需要委派你的活動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() 
    } 
})

來源

2016-06-24 04:55:02 madalinivascu

哇，它完美，謝謝回答madalin：d（PS：我需要等待4分鐘時間接受你的答案） –

嗨，剛剛拒絕一個編輯建議使用'切換（）'代替'hide（）'和'show（）'，因爲切換不可能是對ele的實際可見狀態不可知的最佳選擇。 @ madalin-ivascu做到了防彈的方式:) –

嗨，這個解決方案在類似情況下爲我工作，但我想知道如何將它應用到代碼行：$（'＃subscribe-button'）。 addClass（ '成功'）; –

現在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() 
    } 
    }) 
});

來源

2017-07-24 16:01:10 dhiga

w3school包括HTML，JavaScript不工作

回答

相關問題