PHP echoing HTML but JQuery does not recognize the events attached - php

Question

I have a PHP file that prints some divs and button elements, each one has the same class and they have jQuery events attached.
<?php $i=1; foreach ($questions as $question): ?>
<div class="question" id="<?php echo $i ?>">
<div class="id">
<h3 class="id-header">Domanda #<?php echo $i ?></h3>
<button id="minacce-button" class="btn btn-danger btn-rounded"> Minacce Associate <i class="fas fa-info-circle"></i></button>
</div>
<div class="testo">
<p><?php echo $question['testo'] ?></p>
</div>
<div class="valutazione">
<div class="btn-group shadow-0" role="group">
<button type="button" class="btn btn-danger compliance" id="<?php echo $question['id']; ?>" value="Non Compliance" data-color="dark">
Non Compliance
</button>
<button type="button" class="btn btn-warning compliance" id="<?php echo $question['id']; ?>" value="Da Verificare" data-color="dark">
Da Verificare
</button>
<button type="button" class="btn btn-success compliance" id="<?php echo $question['id']; ?>" value="Compliance" data-color="dark">
Compliance
</button>
<input type="hidden" name="id_question[]" id="q<?php echo $question['id']; ?>" value="">
<input type="hidden" name="value_question[]" id="v<?php echo $question['id']; ?>" value="1">
</div>
</div>
<div class="container-1">
<div class="spiegazione">
<p class="spiegazione-header">Spiegazione <i class="fas fa-info-circle"></i></p>
<p class="spiegazione-text">
<?php if($question['spiegazione'] != '') echo $question['spiegazione']; else echo('Non ci sono ancora spiegazioni disponibili!') ?>
</p>
</div>
<div class="contromisura">
<p class="contromisura-header">Contromisura <i class="fas fa-check-circle"></i></p>
<p class="contromisura-text">
<?php if($question['contromisura'] != '') echo $question['contromisura']; else echo('Non ci sono ancora contromisure disponibili!') ?>
</p>
</div>
<div class="sanzioni">
<p class="sanzioni-header">Sanzioni <i class="far fa-frown"></i></p>
<p class="sanzioni-text">
<?php
$db = pdo_connect_mysql();
$sanzioni = select("SELECT * FROM sanzioni_domande WHERE id_domanda ".$question['id']." ORDER BY tipo", $db);
if($sanzioni) {
foreach ($sanzioni as $sanzione) {
$output = "- ".$sanzione['nome']." (";
$sanzione['tipo'] == 1 ? $output .= "sanzione penale!" : $output .= "sanzione amministrativa!";
$output .= "): ".$sanzione['descrizione'];
echo $output;
} // fine foreach
} else {
echo('Non ci sono ancora sanzioni disponibili!');
} // fine if
?>
</p>
</div>
</div>
</div>
<hr>
<?php $i++; endforeach; unset($questions); ?>
Here i have another php page that after making an ajax adds more divs with the same class as the other, they all have jQuery event click attached as the previous page but the click does not work
$output = '';
//print_r($questions);
$i=$_POST['last']+1;
//echo $i."\n";
foreach ($questions as $question) {
//echo $i;
$output.= '<div class="question" id="'.$i.'">
<div class="id">
<h3 class="id-header">Domanda #'.$i.'</h3>
<button id="minacce-button" class="btn btn-danger btn-rounded"> Minacce Associate <i class="fas fa-info-circle"></i></button>
</div>
<div class="testo">
<p>'.$question['testo'].'</p>
</div>
<div class="valutazione">
<div class="btn-group shadow-0" role="group">
<button type="button" class="btn btn-danger compliance" id="'.$question['id'].'" value="Non Compliance" data-color="dark">
Non Compliance
</button>
<button type="button" class="btn btn-warning compliance" id="'.$question['id'].'" value="Da Verificare" data-color="dark">
Da Verificare
</button>
<button type="button" class="btn btn-success compliance" id="'.$question['id'].'" value="Compliance" data-color="dark">
Compliance
</button>
<input type="hidden" name="value_question" id="v'.$question['id'].'" value="1">
</div>
</div>
<div class="container-1">
<div class="spiegazione">
<p class="spiegazione-header">Spiegazione <i class="fas fa-info-circle"></i></p>
<p class="spiegazione-text">
'; if($question['spiegazione'] != '') $output .= $question['spiegazione']; else $output .= 'Informazioni su questa domanda non disponibili!';
$output .= '</p>
</div>
<div class="contromisura">
<p class="contromisura-header">Contromisura <i class="fas fa-check-circle"></i></p>
<p class="contromisura-text">';
if($question['contromisura'] != '') $output .= $question['contromisura']; else $output .='Non ci sono ancora contromisure disponibili!';
$output .= '</p>
</div>
</div>
</div>
<hr>';
$i++;
} //unset($questions);
echo $output;
Here it is my jQuery code:
$(".compliance").on("click", function(event) {
var id_domanda = $(this).attr("id");
var valutazione = -1;
//alert("Testo bottone cliccato:-" + $(this).val() + "-");
switch ($(this).val()) {
case 'Non Compliance':
valutazione = 0;
break;
case 'Da Verificare':
valutazione = 1;
break;
case 'Compliance':
valutazione = 2;
break;
default:
valutazione = -1;
}
// Assegnazione valutazione a input valutazione domanda
$("#v"+id_domanda).val(valutazione);
$("#q"+id_domanda).val(id_domanda);
alert("Valutazione assegnata: " + valutazione);
alert("Riepilogo:\nID Domanda: " + $("#q"+id_domanda).val() + "\nValutazione: " + $("#v"+id_domanda).val() );})

Answer 1

$(".compliance").on("click",
Only works on content when the DOM is loaded.
If you load content trough AJAX and want JQuery events to work on then you need to change it to:
$(document).on('click', '.compliance', function(event) {})
That way the click event will work also on ajax loaded content