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

Question

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

使用modal的视图数据工作得很好，也可以删除数据，但只在第一页

this is my buttons

<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>