Jquery onclick 函数不适用于其他页面的第二个数据表

Question

我的 php 上有这个数据表，但是 jquery onclick 函数只能在第一页上正常工作，但不能在其他页面上正常工作。

使用模态的视图数据工作正常，删除数据也很好，但只在第一页

这是我的按钮

<button type="button" id="<?php echo $row["Member_ID"]; ?>" class="btn btn-success btn-sm view_member_data">
    <i class="bi bi-eye-fill"></i>
</button>
<button type="button" id="<?php echo $row["Member_ID"]; ?>" class="btn btn-danger btn-sm delete_member_data">
    <i class="bi bi-trash-fill"></i>
</button

查看和删除数据的命令：

<script>
    $(document).ready(function() {
        $('.delete_member_data').click(function(e) {
            e.preventDefault();
            var employee_id = $(this).attr("id");
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "delete_members.php",
                        method: "post",
                        data: {
                            employee_id: employee_id
                        },
                        success: function(data) {
                            Swal.fire(
                                'Deleted!',
                                'Member successfully deleted.',
                                'success'
                            ).then((result) => {
                                window.location.reload(true);
                            });
                        }
                    });
                }
            })
        });
    });
</script>
<script>
    $(document).ready(function() {
        $('.view_member_data').click(function() {
            var employee_id = $(this).attr("id");
            $.ajax({
                url: "view_member_data.php",
                method: "post",
                data: {
                    employee_id: employee_id
                },
                success: function(data) {
                    $('#employee_detail').html(data);
                    $('#dataModal').modal("show");
                }
            });
        });
    });
</script>

Answer 1

我已经为 employe_id 创建了一个全局变量，然后在单击按钮时添加 employe_id。

按钮

<button type="button" onclick="set_employee_id(<?php echo $row["Member_ID"]; ?>)" class="btn btn-success btn-sm view_member_data">
    <i class="bi bi-eye-fill"></i>
</button>
<button type="button" onclick="set_employee_id(<?php echo $row["Member_ID"]; ?>)" class="btn btn-danger btn-sm delete_member_data">
    <i class="bi bi-trash-fill"></i>
</button>

JS

<script>

var employee_id;
function set_employee_id(id){
    employee_id = id;
}

    $(document).ready(function() {
        $('.delete_member_data').click(function(e) {
            e.preventDefault();
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "delete_members.php",
                        method: "post",
                        data: {
                            employee_id: employee_id
                        },
                        success: function(data) {
                            Swal.fire(
                                'Deleted!',
                                'Member successfully deleted.',
                                'success'
                            ).then((result) => {
                                window.location.reload(true);
                            });
                        }
                    });
                }
            })
        });
    });


    $(document).ready(function() {
        $('.view_member_data').click(function() {
            $.ajax({
                url: "view_member_data.php",
                method: "post",
                data: {
                    employee_id: employee_id
                },
                success: function(data) {
                    $('#employee_detail').html(data);
                    $('#dataModal').modal("show");
                }
            });
        });
    });
</script>

Jquery onclick 函数不适用于其他页面的第二个数据表

Jquery Onclick functions wont work on second datatable's other pages

javascript

php

jquery

twitter-bootstrap

sweetalert2