新しいタブをクリックすると、チェックされたテキストが表示されません。

Question

1つのdivにチェックされた値のテキストを表示しようとしています。私が選択した食品のリストにその画像のテキストが来て見せている

をぼんやりとプリ画像をクリックしたときに、デフォルトTiffenことで

はとても有効ですが、私は、左側メニューのランチをクリックしたとき図に示す。私はそれらをチェックするときにテキストが表示されていないが、私はタブをtiffenし、任意のチェックの変更を行うに行くとき昼食値がtiffen

これらは私のコードですと来ている、豆腐と魚：

彼らは次のようにいくつかの食べ物を持っていますここで

は私の部分のコードです：

<section> 
<div class="products"> 
<div class="container"> 
<div class="col-md-3 rsidebar"> 
<div class="related-row"> 
    <h4 class="text-center">Food Menu</h4> 
    <ul class="nav nav-pills nav-justified"> 
     <li role="presentation" class="active"><a href="#tiffin" aria-controls="home" role="tab" data-toggle="tab"> Tiffin </a></li> 
     <li role="presentation"><a href="#lunch" aria-controls="home" role="tab" data-toggle="tab"> <i></i> Lunch </a></li> 
     <li role="presentation"><a href="#dinner" aria-controls="home" role="tab" data-toggle="tab"> Dinner </a></li> 
    </ul>  
</div> 
<div class="related-row" id="FoodSelected"> 
    <h4 class="text-center">Food Selected</h4> 
    <ul class="nav nav-pills nav-justified"> 
     <li class="active"><a id="selectedfood"></a></li> 
    </ul>  
</div> 
</div> 
<form id="FoodForm"> 
<div class="tab-pane active" id="tiffin"> 
    <div class="products-row"> 
     <?php $tq=$conn->query("select * from os_dish where dish_status=1 and dish_type=1 order by id_dish ASC"); 
      while ($tiffen = $tq->fetch_assoc()) { 
      ?> 
      <div class="col-md-3"> 
       <div class="foodmenuform row text-center"> 
        <input type="checkbox" id="<?php echo $tiffen['dish_name'];?>" class="Foodmenu" value="<?php echo $tiffen['dish_name'];?>" name="tifeen[]" hidden> 
        <label for="<?php echo $tiffen['dish_name'];?>"><img src="img/dish/<?php echo $tiffen['dish_image']; ?>" class="img img-responsive" /></label> 
        <h3><?php echo $tiffen['dish_name'];?></h3> 
       </div> 
      </div> 
     <?php } ?> 
    </div> 
</div>  
<div class="tab-pane" id="lunch"> 
    <div class="products-row"> 
     <?php $lq=$conn->query("select * from os_dish where dish_status=1 and dish_type=2 order by id_dish ASC"); 
      while ($lunch = $lq->fetch_assoc()) { 
      ?> 
      <div class="col-md-3"> 
       <div class="foodmenuform row text-center"> 
        <input type="checkbox" id="<?php echo $lunch['dish_name'];?>" class="FoodMenu" value="<?php echo $lunch['dish_name'];?>" name="lunch[]" hidden> 
        <label for="<?php echo $lunch['dish_name'];?>"><img src="img/dish/<?php echo $lunch['dish_image']; ?>" class="img img-responsive" /></label> 
        <h3><?php echo $lunch['dish_name'];?></h3> 
       </div> 
      </div> 
     <?php } ?> 
    </div> 
</div> 
<button id="FoodSubmit" class="btn btn-primary btn-lg btn-block">Submit Food Menu</button> 
</form> 
</section> 

そしてここでは、私のスクリプトコードです：

<script type="text/javascript" language="JavaScript"> 
$(".Foodmenu").click(function(){ 
var checkedFood = $('input[type=checkbox]:checked').map(function(){ 
    console.log($('input[type=checkbox]:checked').serialize()); 
    return $(this).attr('value'); 
}).get().join("<br>"); 
$("#selectedfood").html(checkedFood); 
}); 
</script> 

Answer 1

私はすべてのコードが記述されたソリューションを得たが、故障ではクラス名の問題です私は小さなFoodMenuを与えましたメニューはistead Foodmenu