Impossible de faire fonctionner le code Jquery au clic

Question

J'ai un calendrier qui tire des dates et des heures d'une API en ligne. Lorsqu'il extrait les heures, il les affiche dans un <ul> y <li> comme indiqué ci-dessous :

Voici le code PHP utilisé pour analyser l'heure et créer les éléments de la liste :

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>';
}

J'ai également Jquery qui est censé, lorsque l'on clique sur l'un des éléments de la liste, faire glisser la div qui contient le calendrier vers le haut, puis faire apparaître la div suivante en la faisant glisser vers le bas. Voici le code pour cela :

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

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

Voici les deux div qui sont référencés dans Jquery :

<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>

Ce que je veux, c'est que lorsque je clique sur l'heure disponible dans le calendrier, il prenne l'heure définie dans l'ID du PHP et l'enregistre pour planifier un rendez-vous plus tard, mais je n'ai pas encore implémenté cette partie, j'essaie juste de faire fonctionner l'action de glissement. Actuellement, cela ne fait rien lorsque je clique sur l'élément de la liste.

Answer 1

Mettez à jour votre PHP et ajoutez un attribut de valeur qui prend le temps :

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>';
}

Mettez à jour votre code jQuery pour lier l'événement click sur la balise li éléments :

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