jQuery datatable按钮仅在第一次单击时起作用 HTML-PHP

jQuery datatable按钮仅在第一次单击时起作用 HTML-PHP,php,jquery,html,dom,datatables,Php,Jquery,Html,Dom,Datatables,我在Uteni-metrici.php上有一个表数据,还有2个模式窗口,用于修改/读取数据。在表中,我还有一个按钮(读取、更新和删除): PHP后端 在后端php文件modalUpdate_backend.php中,生成了用于构建模式内容的HTML代码: <?php require '../dbconfig_PDO.php'; if (empty($_POST['save'])) { $id = null; if

我在Uteni-metrici.php上有一个表数据,还有2个模式窗口,用于修改/读取数据。在表中,我还有一个按钮(读取、更新和删除):

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


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

有人有什么建议吗?
感谢您使用委托事件处理程序,以便它可以用于以后添加的元素

例如:

$('table#utenti_metrici')。在('click','btn success',function()上{
//…跳过。。。
});

有关更多信息,请参阅。

这些按钮的html在更新后是否再次呈现?是的,请详细说明其呈现方式!您可以尝试更改此
$(“#table_tenti_metrici.btn success”)。在('click',function(){
上更改为
$('body')。在('click','.btn success',function(){
否…不起作用:-(它继续不起作用。我尝试了其他测试…例如,在td上单击一些代码(在主JS函数之外):before可以正常工作,after Confirm不起作用。它似乎真的不存在于DOM中
    $(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

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


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