如何通过jquery和php在点击按钮时正确提醒我的数据

如何通过jquery和php在点击按钮时正确提醒我的数据,php,jquery,Php,Jquery,我使用下面的代码显示来自后端的json数据,它工作正常,因为我可以获得所有用户id和电子邮件 <script type="text/javascript"> // Display Result working excellently $(document).ready(function(){ $.ajax({ url: 'data.php', type: 'get', data

我使用下面的代码显示来自后端的json数据,它工作正常,因为我可以获得所有用户id电子邮件

    <script type="text/javascript">

// Display Result working excellently

    $(document).ready(function(){
        $.ajax({
            url: 'data.php',
            type: 'get',
            dataType: 'JSON',
            success: function(response){
                var len = response.length;
                for(var i=0; i<len; i++){
                    var id = response[i].id;
                    var email = response[i].email;

                    var dcr = "<tr>" +

                        "<td align='center'>" + email + "</td>" +

                         "<td align='center'><input type='' name='id' id='id' value=" + id + "></td>" +
                        "<td align='center'><input type='' name='email' id='email' value=" + email + "></td>" +
                        "<td align='center'><button id='del_btn' name='del_btn'>Delete</button></td>" +
                        "</tr>";

                    $("#contentTable tbody").append(dcr);
                }
            }
        });
    });


    // alert id and email before deleting content via ajax not working
    $(document).ready(function(){

    $('#del_btn').click(function(){
    var id = $('#id').val();
    var email = $('#email').val();

    alert(id);
    alert(email);

    // here send ajax to delete content

      });
    });

    </script>

        </head>
        <body>
            <div class="container">
                <table id="contentTable" border="1" >
                    <thead>
                        <tr>

                            <th width="30%">Email</th>

                            <th width="30%">Delete</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </body>
    </html>

这是按照Devsi Odedra在评论部分建议的解决方案

$(document).on( 'click', '#del_btn', function(){

$('#del_btn').click(function(){
var id = $('#id').val();
var email = $('#email').val();

alert(id);
alert(email);

// send ajax to delete email

  });
});

您正在添加动态html,因此必须使用
$(document).on(eventName,selector,function(){})
reference=>在部分情况下,只需替换
$(“#del_btn”)。单击(
$(文档)中的函数(){
)。在('click',“#del_btn',函数(){
ID在HTML文档中必须是唯一的,您在循环中多次创建相同的ID会违反它。非常感谢Devsi和04FS。现在可以工作了
$(document).on( 'click', '#del_btn', function(){

$('#del_btn').click(function(){
var id = $('#id').val();
var email = $('#email').val();

alert(id);
alert(email);

// send ajax to delete email

  });
});