jQuery button click not fireing for generated buttons in table

Question

Hey I am trying to get the row of data from a generated html table, I added buttons to the table and I am trying to figure out how to add events to the buttons in order to grab a few cells from that row.

My code does not seem to work and I have no idea why.

I tried following this jsfiddle example, but no luck... jsFiddle example Here is my Code.

Generate table rows with buttons:

function buildHtmlTable(CompanyTime) {
            $("#excelDataTable").empty();
            var columns = addAllColumnHeaders(CompanyTime);

            for (var i = 0; i < CompanyTime.length; i++) {
                var row$ = $('<tr/>');
                if (CompanyTime[i].Company == "KaladiAdmin"){

                }
                else {

                    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
                        var cellValue = CompanyTime[i][columns[colIndex]];

                        if (cellValue == null) { cellValue = ""; }

                        if (cellValue == true) {

                            row$.append($('<td><input type=\'checkbox\' name=\'Check\' checked=\'yes\'></input></td>'));
                        }
                        else if (cellValue == false) {
                            row$.append($('<td><input type=\'checkbox\' name=\'Check\' ></input></td>'));
                        }
                        else {
                            row$.append($('<td/>').html(cellValue));
                        }

                    }
                }
                if (CompanyTime[i].Company == "KaladiAdmin") {

                }
                else {
                    var button = "<button class=\"editButton\" style=\"background-color: #ffa500; color: #ffffff;\" >Update</button>" + 
                        "&nbsp;&nbsp;&nbsp;" +
                        "<button id=\"brnDelete\" class=\"btn btn-default btn-sm\" style=\"background-color: #ffa500; color: #ffffff;\">Remove</button>";
                    //var button = "<button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;</button>";
                    row$.append($('<td/>').html(button));
                }

                $("#excelDataTable").append(row$);
            }
        }

Button Event:

    $('button.editButton').click(function () {
        //var id = $(this).parent().siblings('.CID').text();

        console.log("clicked");
        //console.log(id);

    })

Thanks in advance!

score 1 · Accepted Answer · answered Nov 25 '17 at 20:54

1

Use event delegation to attach events to current and future (dynamically generated) elements.

   $('body').on('click','button.editButton',function () {
        //var id = $(this).parent().siblings('.CID').text();
        console.log("clicked");
        //console.log(id);
    });

answered Nov 25 '17 at 20:54

HaukurHaf

13,522
5
44
59

Thank you this worked perfectly, tried $('button.editButton').on("click",function () { //var id = $(this).parent().siblings('.CID').text(); console.log("clicked"); //console.log(id); }) and that didnt work. – Rolthar Nov 25 '17 at 20:57
You're a life saver :) – Rolthar Nov 25 '17 at 20:57
Good to hear ;) – HaukurHaf Nov 26 '17 at 17:28

score 0 · Answer 2 · answered Nov 25 '17 at 20:55

0

As you're adding elements dynamically you should use delegation:

$(document).on('click', 'button.editButton', function () {
  // code
});

answered Nov 25 '17 at 20:55

Andy

61,948
13
68
95

jQuery button click not fireing for generated buttons in table

2 Answers2