Laravel ajax 请求从 table 获取 id 并将其传递给按钮编辑

Question

你好我正在尝试使 ajax crud 不使用包 Jquery 作为库，我可以将数据加载到 table 没问题，我唯一的问题是当我想编辑数据时，我试图将 ID 传递给编辑按钮，但问题是只有一个按钮可以工作，我只能获得一个 ID，当我单击其余按钮时，它不起作用。

Ajax代码

 $(document).ready(function(){
       $('#my').on('click',function(){
        $.ajax({
            url: "{{ URL::route('sample') }}",
            type:'get',
            dataType:'json',
            contentType:'application/json',
            success:function (data){
                console.log(data);
                $('#data').html("");
                $.each(data, function (key, val){
                    $('#data').append("<tr>"+
                        "<td>"+val.id+"</td>"+
                        "<td>"+val.name+"</td>"+
                        "<td>"+val.code+"</td>"+
                        "<td>"+val.user.name+"</td>"+
                        "<td>"+
                            "<button class='btn btn-warning' id='edit' data-id="+val.id+" value="+val.id+">Edit</button>"+
                            "<button class='btn btn-danger' id='delete' data-id="+"ssasaa"+">Delete</button>"
                        +"</td>"+
                    +"</tr>")

                    $('#edit').click(function(event){
                        id=$(this).val();
                        console.log(id);
                    })
                    $('#delete').click(function(){
                        console.log('button delete click');
                    })

                })

            },

            error:function(err){
                    console.log('Error loading data')
                 }

        });/*==End of Ajax==*/


    });
            });

控制台结果

Answer 1

发生这种情况是因为 jquery 点击处理程序针对的是 ID：

 $('#my').on('click'...

在 HTML 中，ID 必须是唯一的。只有一个元素可以有 id "my"

将所有 html 按钮上的 id="my" 更改为 class，例如 class='my'，然后将 jquery 更改为：

 $('.my').on('click'...

看得更深

您很可能还需要将 $('#edit') 和 $('#delete') 转换为 classes，但是如果没有看到 html [=17] 就很难确定=]

还有

我看到你说你这样做没有包，只有 jquery，也就是说，我建议研究一下 Backpack for laravel，这将使它在设置后非常容易构建 :)

Laravel ajax 请求从 table 获取 id 并将其传递给按钮编辑

Laravel ajax request get the id from the table pass it to button edit

ajax

jquery

laravel-6

看得更深

还有