クリック時にJqueryコードが機能しない

Question

私は、APIからオンラインで日付と時刻を取得しているカレンダーを持っています。それは時代を引っ張ると、以下のように、それは<ul>と<li>セットアップでそれらを表示します。

ここで時間を解析し、リスト項目を作成するために使用されるPHPコードです：

foreach($decoded as $times){  
    $dateTime = DateTime::createFromFormat('Y-m-d\TH:i:sO', $times->time); 
    $time = $dateTime->format('h:i A'); 

    $eventListHTML .= '<li id='.$times->time.' class="available_times">'.$time.'</li><br>'; 
} 

また、リスト項目をクリックすると、カレンダーを含むdivをスライドさせてから、次のdivをスライドさせて表示します。ここではそのためのコードは次のとおりです。ここで

$(".acuity_times").click(function(){ 

    $("#calendar_div").slideUp(1000,function(){ 
     $("#marketing_div").slideDown(1000); 
    }); 
}); 

はjQueryの中で参照されている2つのdivのとおりです。私はそれが最終的に何をしたいのか

<div id="calendar_div"> 
<script> 
$("#calendar_div").hide(0); 
</script> 
    <?php echo getCalender(); ?> 
</div> 
<div id="marketing_div"> 
<script> 
$("#marketing_div").hide(0); 
</script> 
    <?php echo chooseMarketing(); ?> 
</div> 

することは、私が上で利用可能な時間をクリックすると、ありますカレンダーは、PHPのIDに設定されている時間がかかり、後でアポイントをスケジュールするために保存されますが、まだその部分を実装していないので、スライドアクションを実行しようとしています。現在、List Itemをクリックしても何もしません。

Answer 1

あなたのPHPを更新し、時間がかかるvalue属性を追加します。

foreach($decoded as $times){  
    $dateTime = DateTime::createFromFormat('Y-m-d\TH:i:sO', $times->time); 
    $time = $dateTime->format('h:i A'); 

    $eventListHTML .= '<li id='.$times->time.' value='.$times->time.' class="available_times">'.$time.'</li><br>'; 
} 

li要素にクリックイベントをバインドするためにあなたのjQueryのコードを更新します。

$(".available_times").on('click', function() { 
    var time = $(this).val(); 
    $("#calendar_div").slideUp(1000, function() { 
     $("#marketing_div").slideDown(1000); 
    }); 
});