Question

每当我点击与我试图得到的数据在同一行上的编辑按钮时，我就会尝试获取表格行的特定数据，这似乎是我的编辑按钮发射两次因为我在控制台中获得了双输出。 double output我刚来这里，所以请指导我。我无法理解为什么我的按钮会触发两次，但是当我添加 $（“body”）。off（）; 时，问题就消失了。

你们可以帮我解释为什么我的编辑按钮会发射两次吗？

编辑：我删除了这段代码并仍然开了两次

 <td><button type="button" class="btn btn-action" data-action = "delete" data-client-id = "<?= $item['customer_id'] ?>" name="delete"> Delete</button></td>

customerlist.php

<!-- table code goes here -->
<div class="container mt-5">
    <table class="table table-hover">
    <h2>CUSTOMER LIST</h2>
    <thead>
        <tr>
            <th scope="col">Count</th>
            <th scope="col">Firstname</th>
            <th scope="col">Lastname</th>
            <th scope="col">Email Address</th>
            <th scope="col">Address</th>
            <th scope="col">Username</th>
            <th scope="col">Contract Started</th>
            <th scope="col">Contract Ended</th>
            <th scope="col">Actions</th>
        </tr>
    </thead>

    <!-- checking DB connection and accessing data-->
    <?php
    include("classlib/query.inc.php");

    //checking if Database is Connected
    $object = new Dbh;
    $object->connect();
    //end of checking

    //getting the table data
    $tableData = new Query();
    $count=1;

    foreach($tableData->selectAll('customer_info') as $item){

    // var_dump($item);

  ?>
    <tbody>
        <tr>
            <td><?= $count ?></th>
            <td><?= $item['first_name'] ?></td>
            <td><?= $item['last_name'] ?></td>
            <td><?= $item['email_address'] ?></td>
            <td><?= $item['home_address'] ?></td>
            <td><?= $item['username'] ?></td>
            <td><?= $item['contract_start'] ?></td>
            <td><?= $item['contract_end'] ?></td>
            <td><button class="btn btn-action" data-action = "edit" data-client-id = "<?= $item['customer_id'] ?>" name="edit"> Edit</button></td>

        </tr>
    </tbody>

    <?php
        $count++;
        } //end tag of foreach loop
    ?>

    </table>
<!-- end of table code -->

core.js

$(document).ready(function(){
    //some add data codes here

    //edit and delete
    // $("body").off();
    $('body').on('click', '.btn-action', function(){
        var action = $(this).data('action');
        var customerID = $(this).data('client-id');

        if (action == "edit"){
            $.ajax({
                url: "php/client_action.php",
                type: "post",
                data: {action:action,customerID:customerID},
                success: function(data){
                    $("#myModal").modal();
                    x = JSON.parse(data);
                    // console.log(data);
                    console.log(x);
                }
            });

        }
    });

});

query.inc.php

<?php
include("connection.inc.php");

class Query extends Dbh {

    /**
     * returning all value from specific table
     */

    public function selectAll($table){
        try{
            $stmt = $this->connect()->prepare("SELECT * FROM $table");
            $stmt->execute();
            $result = $stmt->fetchAll();

            /**
             * returning the value of the table
             */
            foreach($result as $item){
                $data[]=$item;
            };
            return $data;

        }
        catch(PDOException $e){
            echo $e->getMessage(); 
            return false;
        }
    }

    public function selectId($table, $id){
        try{
            $stmt = $this->connect()->prepare("SELECT * FROM $table WHERE customer_id=:customerID");
            $stmt->execute([
                'customerID' => $id
            ]);

            $result = $stmt->fetch(PDO::FETCH_ASSOC);

            /**
             * returning the value of the table
             */
            // foreach($result as $item){
            //  $data[]=$item;
            // };

            // return $result;

            // var_dump($result);
            echo json_encode($result);
        }
        catch(PDOException $e){
            echo $e->getMessage(); 
            return false;
        }
    }

}

client_action.php

<?php
include("../classlib/query.inc.php");

if($_POST["action"] == "edit"){
    $showIdInfo =  new Query();
    $result = $showIdInfo->selectId('customer_info', $_POST['customerID']);
    // echo json_encode($result);
}

Answer 1

我认为你没有分配任何＆＃34;类型＆＃34;按钮所以触发2次请试着告诉我。

<td><button type="submit" class="btn btn-action" data-action = "edit" data-client-id = "<?= $item['customer_id'] ?>" name="edit"> Edit</button></td>
<td><button type="button" class="btn btn-action" data-action = "delete" data-client-id = "<?= $item['customer_id'] ?>" name="delete"> Delete</button></td>

Answer 2

你可以在你的core.js中尝试这个;

$('.btn-action').unbind().click(function () {
    // your actions
});

JQuery按钮两次射击

2 个答案: