On click delete table row in Jquery

Question

I have this code Ajax/Jquery that creates a dynamic table with rows based on data retrieved from the database. When creating the table buttons are also created dynamically for each row. In addition to the above I would like to be able to call a function for thees buttons. For example if the first table row button has an id of 0, then clicking on button with id 0 will call a function that would take the id of the first row, and perform a database delete function. How can I achieve this?

Here is my code where the table is created dynamically:

success: function(controller_data)
              {     JSON.stringify(controller_data);

                        var tr;
                        for (var i = 0; i < controller_data.length; i++) {

                            tr = $('<tr/>');
                  tr.append("<td><input name = \"radios\" value = tablebutton"+i+" id=tablebutton"+i+" type=\"button\"></td>");
                            tr.append("<td>" + controller_data[i].id + "</td>");
                            tr.append("<td>" + controller_data[i].question + "</td>");
                            tr.append("<td>" + controller_data[i].image + "</td>");
                            tr.append("<td>" + controller_data[i].answer1 + "</td>");
                            tr.append("<td>" + controller_data[i].answer2 + "</td>");
                            tr.append("<td>" + controller_data[i].answer3 + "</td>");
                            tr.append("<td>" + controller_data[i].answer4 + "</td>");
                            $('table').append(tr);
                              }
              }

Answer 1

You should use event delegation on() since you deal with fresh DOM added dynamically to the page, eg :

$('body').on('click', 'input[id^="tablebutton"]', function(){
     //Call your function
})

Try to add class to identify td that contain row id eg :

tr.append("<td class='row-id'>" + controller_data[i].id + "</td>");

Full code :

$(function(){ //Ready function
     $('body').on('click', 'input[id^="tablebutton"]', function(){
         var row_id = $(this).parents('tr').find('.row-id').text(); //get the id
         myFunction(row_id);
     })
})

Hope this helps.

Answer 2

This would be the delegated event handler registered on the next suitable parent node which would be the <table> (imho)

$("table").on("click", "input.delete", function() {
    var rowId = $(this).val();

    // delete row in backend...
});

But this will only work with the restructured success handler below:

success : function (controller_data) {
    var rows = [];

    for (var i = 0; i < controller_data.length; i++) {
        rows.push('<tr>'
                    + '<td><input class="delete" name="radios" value="' + i + '" type="button"></td>'
                    + '<td>' + controller_data[i].id + '</td>'
                    + '<td>' + controller_data[i].question + '</td>'
                    + '<td>' + controller_data[i].image + '</td>'
                    + '<td>' + controller_data[i].answer1 + '</td>'
                    + '<td>' + controller_data[i].answer2 + '</td>'
                    + '<td>' + controller_data[i].answer3 + '</td>'
                    + '<td>' + controller_data[i].answer4 + '</td>'
                + '</tr>';
    }

    $("table").append(rows.join(""));
}

I've removed the useless JSON.stringify(...) call, and changed the for loop a little bit to only change the DOM once per request instead of once per row.
I've also added the class delete to the <input /> for a more descriptive selector.
And last but not least the value is now the id only instead of tablebutton<id> .