How to properly alert my data on button click via jquery and php

Question

I used the code below to display json data from backend and it works fine as I can get all users id and email.

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

Here is my problem. I want to delete content of result when Delete button is clicked and to this effect,

I have attached a Delete button and pass users id and email in a form input but when I click on delete button for each result, the jquery cannot alert id and email so that i can further post it to ajax as per code below

It seems jquery is not responding delete action button. Please how do I alert users id and email first so that I can pass it to ajax. Thanks

$(document).ready(function(){

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

alert(id);
alert(email);

// send ajax to delete email

  });
});

you are adding dynamic html so you have to use `$(document).on( eventName, selector, function(){} );` Refer = > https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Devsi Odedra, Oct 02 '19 at 10:41
insort just replace `$('#del_btn').click(function(){` by `$(document).on( 'click', '#del_btn', function(){` — Devsi Odedra, Oct 02 '19 at 10:44
IDs _must_ be unique within an HTML document, which you are violating by creating the same IDs multiple times in your loop. — 04FS, Oct 02 '19 at 10:44

score 1 · Accepted Answer · answered Oct 02 '19 at 11:03

This is the solution that works as suggested in the comment section by 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

  });
});

How to properly alert my data on button click via jquery and php

1 Answers1