php - jQuery 数据表按钮仅在第一次单击时有效

Question

HTML - PHP

我在 utenti-metrici.php 上有一个表数据，以及两个用于修改/读取数据的模态窗口。在表格中我还有按钮(读取、更新和删除):

    <div class="widget-content">
    <table id="table_utenti_metrici" class="table table-sorting table-hover table-striped table-bordered">
        <thead>
            <tr>
              <th>ID</th>
              <th>Ragione Sociale</th>
              <th>P.IVA</th>
              <th>Tel</th>
              <th>Email</th>
              <th>Referente</th>
              <th>Strumenti</th>
            </tr>
        </thead>                        
          <tbody>
          <?php
           include 'dbconfig_PDO.php';
           $pdo = Database::connect();                          
           $sql = 'SELECT utenti_metrici.*, referenti.nome, referenti.cognome FROM utenti_metrici JOIN referenti ON utenti_metrici.idreferente=referenti.idreferente';  
           foreach ($pdo->query($sql) as $row) {
                    echo '<tr>';
                    echo '<td class="row_id">'. $row['id'] . '</td>';
                    echo '<td class="ragSoc">'. $row['ragioneSociale'] . '</td>';
                    echo '<td>'. $row['piva'] . '</td>';
                    echo '<td>'. $row['telefono'] . '</td>';
                    echo '<td>'. $row['email'] . '</td>';
                    echo '<td>'. $row['nome'] . ' '. $row['nome'] . '</td>';
                    echo '<td width=250>';                             
                    echo '<a class="btn btn-default">Read</a>';
                    echo ' ';
                    echo '<a class="btn btn-success">Update</a>';
                    echo ' ';
                    echo '<a class="btn btn-danger">Delete</a>';
                    echo '</td>';

                    echo '</tr>';
           }
           Database::disconnect();
          ?>
          </tbody>
    </table>                    
    <!-- MODAL WINDOW FOR READ TABLE ROW -->
    <div class="modal fade" id="modalReadUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">

        </div>
    </div>
    <!-- END MODAL WINDOW FOR READ TABLE ROW -->                    
    <!-- MODAL WINDOW FOR DELETE TABLE ROW -->
    <div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">

        </div>
    </div>
    <!-- END MODAL WINDOW FOR DELETE TABLE ROW -->
</div>

jQuery

我在 utenti-metrici.js 中创建了一个 jQuery 数据表:

    $(document).ready(function(){

    //clicked row
    var nRow='';

    var $table_utenti_metrici = $('#table_utenti_metrici').DataTable({});
    //--------------------------------------------------------------------------------------------------------------------------------------->>>> PULSANTE UPDATE   
        $('#table_utenti_metrici .btn-success').on('click',function(){
            alert("er");
            var row_id = $(this)    .closest("tr")
                                    .find(".row_id")
                                    .text()
            nRow=$table_utenti_metrici.row($(this).parents('tr'));

            $.ajax({
                cache: false,
                type: 'POST',
                url: 'php/modalUpdate_backend.php',
                data: 'id='+row_id,
                success: function(data){

//                  obj=$.parseJSON(data);
//                  $("#modalRead h3").html(obj['ragioneSociale']);
//                  
//                  $("#read_id").attr('placeholder',obj['id']);                

                    $(".modal-dialog").empty();
                    $(".modal-dialog").html(data);

                    $("#modalReadUpdate").modal("show");
                }
            })
        })
//--------------------------------------------------------------------------------------------------------------------------------------->>>> END PULSANTE UPDATE

//--------------------------------------------------------------------------------------------------------------------------------------->>>> PULSANTE SAVE & EXIT  
        $('#modalReadUpdate').on('click','.btn-custom-primary',function(){

            var row_id = $("#modalReadUpdate .form-group").find('input').select(':first').val();
            //************** LOG **************
            //*********************************
            var log=1;
            var logID=0
            if (log){
                logID++;
                console.log('[' + logID + '] - Riga selezionata (row_id): '); console.log(row_id);
            }
            //*********************************
            //************** LOG **************

            var values = [];
            $('#modalReadUpdate .form-horizontal input').each(function(){
                values.push($(this).val());
            })
            //************** LOG **************
            //*********************************
            if (log){
                logID++;
                console.log('[' + logID + '] - Valori riga selezionata (values): '); console.log(values);
                logID++;
                console.log('[' + logID + '] - Contenuto riga cliccata (nRow): '); console.log(nRow);
                //console.log(nRow.index());
            }
            //*************************************************************************************************************************************************************
            //************** LOG ******************************************************************************************************************************************

            $.ajax({
                cache: false,
                type: 'POST',
                url: 'php/modalUpdate_backend.php',
                data: {id: row_id, save: 1, values: values},
                success: function(data){
                    //************** LOG ******************************************************************************************************************************************
                    //*************************************************************************************************************************************************************
                    if (log){
                        logID++;
                        console.log('[' + logID + '] - Dati di ritorno dallo script PHP (php/modalUpdate_backend.php): '); console.log(data);
                    }
                    //*************************************************************************************************************************************************************
                    //************** LOG ******************************************************************************************************************************************

                    var obj=$.parseJSON(data);

                    //************** LOG ******************************************************************************************************************************************
                    //*************************************************************************************************************************************************************
                    if (log){
                        logID++;
                        console.log('[' + logID + '] - Oggetto JSON di ritorno dallo script PHP (php/modalUpdate_backend.php) : '); console.log(obj);
                    }
                    //*************************************************************************************************************************************************************
                    //************** LOG ******************************************************************************************************************************************

                    var tableRow = $("td").filter(function() {
                        return $(this).text() == obj[0];
                    }).closest("tr");

                    //************** LOG *****************************************************************************************************************************************
                    //************************************************************************************************************************************************************
                    if (log){
                        logID++;
                        console.log('[' + logID + '] - Variabile tableRow : '); console.log(tableRow);
                    }
                    //*************************************************************************************************************************************************************
                    //************** LOG ******************************************************************************************************************************************

                    var dataRow=$table_utenti_metrici.row(nRow.index());    

                    //************** LOG ******************************************************************************************************************************************
                    //*************************************************************************************************************************************************************
                    if (log){
                        logID++;
                        console.log('[' + logID + '] - Variabile dataRow : '); console.log(dataRow);
                    }
                    //*************************************************************************************************************************************************************
                    //************** LOG ******************************************************************************************************************************************

                    newData=[obj[0], obj[1],obj[2],obj[7],obj[8],nRow.data()[5],nRow.data()[6]];

                    //************** LOG ******************************************************************************************************************************************
                    //*************************************************************************************************************************************************************
                    if (log){
                        logID++;
                        console.log('[' + logID + '] - Variabile per aggiornamento riga tabella (newData) : '); console.log(newData);
                    }
                    //*************************************************************************************************************************************************************
                    //************** LOG ******************************************************************************************************************************************

                    dataRow.data(newData).draw();

                    $("#modalReadUpdate").modal("hide");
                }
            })
        })
//--------------------------------------------------------------------------------------------------------------------------------------->>>> END PULSANTE SAVE & EXIT

PHP 后端

在后端 php 文件 modalUpdate_backend.php 中，生成了用于构建模态内容的 HTML 代码:

    <?php

    require '../dbconfig_PDO.php';

    if (empty($_POST['save'])) {        
        $id = null;
        if ( !empty($_POST['id'])) {
            $id = $_REQUEST['id'];
        }

        if ( null==$id ) {
            header("Location: index.php");
        } else {
            $pdo = Database::connect();
            $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $sql = "SELECT * FROM utenti_metrici where id = ?";
            $q = $pdo->prepare($sql);
            $q->execute(array($id));
            $data = $q->fetch(PDO::FETCH_ASSOC);
            Database::disconnect();
        }

        echo('<div class="modal-content">');
            echo('<div class="modal-header">');
                echo('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>');
                echo('<h3 class="modal-title" id="myModalLabel">'.$data['ragioneSociale'].'</h3>');
            echo('</div>');
            echo('<div class="modal-body">');
                echo('<div class="form-horizontal" >');
        $i=0;
        foreach ($data as $key => $value){
            if ($key==0){
                        echo('<div class="form-group">');
                        echo('<label class="col-md-2 control-label">'.$key.'</label>');
                        echo('<div class="col-md-10">');
                if ($i++==0){
                    echo('<input type="text" class="form-control" value="'.$value.'" disabled>');
                } elseif ($i==count($data)){
                    echo('<input type="text" class="form-control" value="'.$value.'" disabled>');
                } else {
                    echo('<input type="text" class="form-control" value="'.$value.'">');
                }                                   
                        echo('</div>');
                        echo('</div>');
            }
        }

                echo('</div>'); 
            echo('</div>'); 
            echo('<div class="modal-footer">');
                echo('<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times-circle"></i> Close</button>');
                echo('<button id="prp" type="button" class="btn btn-custom-primary"><i class="fa fa-check-circle"></i> Save changes</button>');
            echo('</div>');
        echo('</div>');
    } elseif (!empty($_POST['save'])){

        $id = null;
        if ( !empty($_POST['id'])) {
            $id = $_REQUEST['id'];
        }

        $pdo = Database::connect();
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $sql = "SELECT * FROM utenti_metrici WHERE id = ?";
        $q = $pdo->prepare($sql);
        $q->execute(array($id));
        $data = $q->fetch(PDO::FETCH_ASSOC);

        $query_set='';
        $numItems = count($data);
        $i=0;
        foreach ($data as $key => $value){
            if(++$i === $numItems) {
                $query_set=$query_set . $key . ' = ? ';
            } else {
                $query_set=$query_set . $key . ' = ?, ';
            }           
        }

        $sql = "UPDATE utenti_metrici SET " . $query_set . " WHERE id = ?";
        $q = $pdo->prepare($sql);

        $values=$_POST['values'];

        echo(json_encode($values));

        array_push($values,$id);

        $q->execute($values);
        Database::disconnect();     
    }


?>

...因此，一切正常:

• 我点击更新按钮，模态窗口正确显示
• 我修改了一些数据
• 我按下确认按钮，mySQL 数据库中的数据被正确修改
• 模态窗口正确消失
• 但是:由于我调用此脚本(在“确认”按钮上调用)，因此 DOM 上似乎不存在该行。如果我试图用它的元素做某事，我做不到。例如，如果我点击 3 个按钮中的一个……任何东西都会出现。但是如果我点击另一行的同一个按钮，一切正常(第一次)

似乎当我为更新的行构建数据时:

newData=[obj[0], obj[1],obj[2],obj[7],obj[8],nRow.data()[5],nRow.data()[6]];
dataRow.data(newData).draw();

那个 nRow.data()[6]包含三个按钮的 HTML 未在 DOM 上正确注册。

有人有什么建议吗？谢谢

Answer 1

使用委托(delegate)事件处理程序，以便它适用于稍后添加的元素。

例如:

$('#table_utenti_metrici').on('click', '.btn-success', function(){
   // ... skipped ...
});

参见 jQuery DataTables: Why click event handler does not work获取更多信息。