Jquery .on（'click'）沒有做什麼預計

Question

我有這個網站，你點擊一個角色和一個小角色的人物角色的介紹。這是通過切換一個'主動'類，從vh：-200到vh爲10的頂部。

現在，當我點擊一個菜單項..所有板需要得到-200vh的頂部再次。

HTML

<div id="nav"> 
    <ul> 
     <li class="item active"> 
      <a><img id="menu_button" src="images/Menu/home.png"></a> 
      <div class="board" style= 
      "background-image: url(images/borden/bord_home.png);"></div> 
     </li> 
     <li class="item characters"> 
      <a><img id="menu_button" src="images/Menu/about.png"></a> 
      <ul class="characters_container"> 
       <li class="character" data-id="samB" id="sam" style= 
       "background-image: url(images/personages/Sam.png);"></li> 
       <li class="character" data-id="piepieB" id="piepie" style= 
       "background-image: url(images/personages/Piepie.png);"></li> 
       <li class="character" data-id="royB" id="roy" style= 
       "background-image: url(images/personages/Roy.png);"></li> 
       <li class="character" data-id="spinB" id="spin" style= 
       "background-image: url(images/personages/spin.png);"></li> 
       <li class="character" data-id="oetjeB" id="oetje" style= 
       "background-image: url(images/personages/Oetje.png);"></li> 
       <li class="character" data-id="mosjeB" id="mosje" style= 
       "background-image: url(images/personages/Mosje.png);"></li> 
       <li class="character" data-id="minaB" id="mina" style= 
       "background-image: url(images/personages/Mina.png);"></li> 
       <li class="character" data-id="elisaB" id="elisa" style= 
       "background-image: url(images/personages/Elisa.png);"></li> 
       <li class="character" data-id="bellaB" id="bella" style= 
       "background-image: url(images/personages/Bella.png);"></li> 
      </ul> 
      <ul class="character_board_container"> 
       <li class="character_board" id="samB" style= 
       "background-image: url(images/personages/sam_bord.png);"></li> 
       <li class="character_board" id="piepieB" style= 
       "background-image: url(images/personages/piepie_bord.png);"> 
       </li> 
       <li class="character_board" id="royB" style= 
       "background-image: url(images/personages/roy_bord.png);"></li> 
       <li class="character_board" id="spinB" style= 
       "background-image: url(images/personages/spin_bord.png);"></li> 
       <li class="character_board" id="oetjeB" style= 
       "background-image: url(images/personages/oetje_bord.png);"> 
       </li> 
       <li class="character_board" id="mosjeB" style= 
       "background-image: url(images/personages/mosje_bord.png);"> 
       </li> 
       <li class="character_board" id="minaB" style= 
       "background-image: url(images/personages/mina_bord.png);"></li> 
       <li class="character_board" id="elisaB" style= 
       "background-image: url(images/personages/elisa_bord.png);"> 
       </li> 
       <li class="character_board" id="bellaB" style= 
       "background-image: url(images/personages/bella_bord.png);"> 
       </li> 
      </ul> 
     </li> 
     <li class="item"> 
      <a><img id="menu_button" src="images/Menu/news.png"></a> 
      <div class="board" style= 
      "background-image: url(images/borden/bord_agenda.png);"> 
       <div id="frame_wrapper_agenda"> 
        <iframe frameborder="none" src="agenda.php"></iframe> 
       </div> 
      </div> 
     </li> 
     <li class="item foto"> 
      <a><img id="menu_button" src="images/Menu/camera.png"></a> 
     </li> 
     <li class="item video"> 
      <a><img id="menu_button" src="images/Menu/play.png"></a> 
     </li> 
     <li class="item"> 
      <a><img id="menu_button" src="images/Menu/shop.png"></a> 
      <div class="board" style= 
      "background-image: url(images/borden/bord_shop.png);"> 
       <a href="http://www.hetmooisteboek.nl/product/piepie-en-sam/" 
       id="boek1" target="_blank"></a> <a href= 
       "http://www.hetmooisteboek.nl/product/piepie-sam-en-het-grote-geheim/" 
       id="boek2" target="_blank"></a> 
      </div> 
     </li> 
     <li class="item"> 
      <a><img id="menu_button" src="images/Menu/contact.png"></a> 
      <div class="board" style= 
      "background-image: url(images/borden/bord_contact.png);"> 
       <a href="#" id="insta"></a> <a href="#" id="facebook"></a> 
       <a href="#" id="twitter"></a> 
       <div id="form_wrapper_contact"> 
        <form action="#" method="post"> 
         <input name="contact_naam" placeholder="naam" type= 
         "text"> <input name="contact_email" placeholder="email" 
         type="text"> 
         <textarea border="none" name= 
         "contact_tekst"></textarea> <input name= 
         "contact_submit" type="submit" value="verstuur!"> 
        </form> 
       </div> 
      </div> 
     </li> 
    </ul> 
</div> 

JS代碼

$('#nav > ul > li.item').on('click', function() { 
    //This line doesn't work.. when clicked on a menu item, it has to remove the 
    //active class on all boards as done a little further down. 
    //by adding this line the characters become unclickable. 
    $('.character_board_container li').removeClass('active'); 
    $('#nav > ul > li').removeClass('active'); 
    $(this).toggleClass('active'); 
}); 

$('.characters_container li').on('click', function() { 

    //this does his job...it removes the class active from the other boards 
    //when clicked on a different character       
    $('.character_board_container li').removeClass('active'); 

    var character = $(this).attr('data-id'); 
    $('.character_board_container #' + character).toggleClass('active'); 

}); 

任何人任何想法？幫助將appriciated（：

映入眼簾，Olcan

Answer 1

檢查`。對」方法原型

其$(document).on(event,selector, function() {});

，所以你需要定義像$(document).on('click','#nav > ul > li.item', function() {});

點擊事件試試下面代碼

/* Remove Below event call 
$(document).on('click','#nav > ul > li', function(){ 
    //$('.character_board_container li').removeClass('active'); 
    //$('#nav > ul > li').removeClass('active'); 
    //$(this).toggleClass('active'); 
}); */ 

$(document).on('click','.characters_container li', function() { 
    $('.character_board_container li').removeClass('active'); 
    var character = $(this).attr('data-id'); 
    $('.character_board_container #' + character).toggleClass('active'); 
});