jQuery數據表按鈕僅在首次單擊時有效

Question

HTML-PHP

我在utenti-metrici.php上有一個表數據，還有2個用於修改/讀取數據的模態窗口。 在表中，我還有一個按鈕（讀取，更新和刪除）：

    <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();

包含三個按鈕的HTML的nRow.data（）[6]未在DOM上正確注冊。

有人有什么建議嗎？ 謝謝

Answer 1

使用委托事件處理程序，以便它可用於以后添加的元素。

例如：

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

有關更多信息，請參見jQuery DataTables：為什么單擊事件處理程序不起作用 。