Php “删除”按钮仅在第一行上有效，而不在其余行上有效

我已经从数组中获取了valuescard详细信息，并将它们放在一个html表中，我还添加了删除按钮来删除特定的卡

我通过ajax删除它。当我点击第一行的删除按钮时，效果非常好，但当我点击第二行或第三行的其他删除按钮时，没有任何动作

请建议解决此问题的正确方法

提前谢谢

这是我的密码

           <tr>
                        <td><?php echo $val['last4'];?></td>
                        <td><?php echo $val['exp_month'];?></td>
                        <td><?php echo $val['exp_year'];?></td>
                        <td><button id = "del">Delete</button></td>
                    </tr>

Ajax part 


<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script>                        
        $('#del').click(function() {
        //var a=document.getElementById("").value;
        var val0 = $('#id').val();
        var val01 = $('#cust').val();

        var fade = document.getElementById("fade");         

        var show = function(){
        fade.style.display = "block";
        }

        show();
        $.ajax({
        type: 'POST',
        url: 'mywebsite.com/deleting.php',
        data: { card_id: val0,cust_id: val01 },
        success: function(response) {
        fade.style.display = "none";
        // alert(response);
         mystring = response.replace(/^\s+|\s+$/g, "");
        $('#result11').html(mystring);

        }
        });
        });
    </script>

---

您需要为delete buttons提供一个类，并在该类上绑定不带id的事件。然后在bind函数中，从该行元素中选择值，然后将其传递给Ajax。

您需要为delete buttons提供一个类，并在该类上绑定不带id的事件。然后在bind函数中，从该行元素中选择值，然后将其传递给AjaxAjax。

您的按钮上有相同的id。Id在html文档中必须是唯一的，并且不能在多个元素之间共享

将按钮更改为使用类：

<td><button class="del">Delete</button></td>

$('.del').click(function(e) {
    // Since we're using ajax for this, stop the default behaviour of the button
    e.preventDefault();

    // Get the value from the clicked button
    var val0 = $(this).val();

---

我还在函数调用中添加了事件e，并停止了按钮的默认行为，即单击表单时提交表单。

您的按钮上有相同的id。Id在html文档中必须是唯一的，并且不能在多个元素之间共享

将按钮更改为使用类：

<td><button class="del">Delete</button></td>

$('.del').click(function(e) {
    // Since we're using ajax for this, stop the default behaviour of the button
    e.preventDefault();

    // Get the value from the clicked button
    var val0 = $(this).val();

---

我还在函数调用中添加了事件e，并停止了按钮的默认行为，即在单击表单时提交表单。

谢谢，它现在工作得很好。但是为什么在使用Id时它不起作用呢？@Mario-第一段解释了这一点。此外，请检查link@Mario根据，从技术上讲，具有非唯一ID会导致未定义的行为。然而，在实践中，最重要的是什么？浏览器在使用getElementById时返回第一个元素，$'del'在后台执行此操作。因此，在您的代码中，只有第一个按钮的末尾附加了一个单击处理程序。谢谢，它现在工作得很好。但是为什么在使用Id时它不起作用呢？@Mario-第一段解释了这一点。此外，请检查link@Mario根据，从技术上讲，具有非唯一ID会导致未定义的行为。然而，在实践中，最重要的是什么？浏览器在使用getElementById时返回第一个元素，$'del'在后台执行此操作。因此，在您的代码中，只有第一个按钮的末尾附加了一个click处理程序。