Question

我从数组中获取了值（卡片详细信息）并将它们放在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>

Answer 1

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

更改按钮以改为使用类：

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

然后改变你的jQuery来绑定到那个类：

$('.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，并在单击时停止了按钮的默认行为（即提交表单）。

Answer 2

您需要为删除按钮指定一个类，并在该类上绑定事件而不是id。然后在绑定函数中从该行元素中选择值，然后将它们传递给Ajax。

“删除”按钮仅适用于第一行，而不适用于其余行

2 个答案: