PHP 回显 HTML 但 JQuery 无法识别附加的事件

Question

我有一个 PHP 文件，它打印一些 div 和按钮元素，每个都有相同的 class 并且它们附加了 jQuery 个事件。

                    <?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 &nbsp;<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 &nbsp;<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> &nbsp;
                            <div class="contromisura">
                                <p class="contromisura-header">Contromisura &nbsp;<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> &nbsp;
                            <div class="sanzioni">
                                <p class="sanzioni-header">Sanzioni &nbsp;<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); ?>

这里我有另一个 php 页面，在制作 ajax 后添加了更多与另一个 class 相同的 div，它们都附加了 jQuery 事件点击与上一页相同，但点击无效


        $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 &nbsp;<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 &nbsp;<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> &nbsp;
                <div class="contromisura">
                    <p class="contromisura-header">Contromisura &nbsp;<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;

这是我的 jQuery 代码：


    $(".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",

仅在加载 DOM 时才对内容起作用。如果您通过 AJAX 加载内容并希望 JQuery 事件继续进行，那么您需要将其更改为：

$(document).on('click', '.compliance', function(event) {})

这样点击事件也将适用于 ajax 加载的内容

PHP 回显 HTML 但 JQuery 无法识别附加的事件

PHP echoing HTML but JQuery does not recognize the events attached

php

jquery

event-handling