how to trigger a button created on javascript using javascript?

Question

I am currently working on a web application that needs to preview some report using a button inside a data table. each row on the data table has its own button created on the javascript and I want to trigger that button using the same javascript file.

Is there anyway to do this? Please see code below:

      $('#AccountList').append('<tr data-empid="' + row.ci_ID + '">'
        + '<td  text-align:center;">' + row.ciCODe + '</td>'
        + '<td  text-align:center;">' + row.FullName + '</td>'
        + '<td  text-align:center;">' + row.LoanType + '</td>'
        + '<td  text-align:center;">' + row.Bank + '</td>'
        + '<td  text-align:center;">' + row.Amount + '</td>'
        + '<td  text-align:center;"><label class="'+ xLabel +'"><h6>' + xText + '</h6></label></td>'            
        + '<td  text-align:center;"><button class="btn btn-primary btn-outline-primary" id="btnPreview" name="btnPreview"><i class="icofont icofont-prescription"></i></button>'
        + '<button class="btn btn-danger btn-outline-danger" id="btnReinvestigate" name="btnReinvestigate"><i class="icofont icofont-redo"></i></button>'
        +'</td>'
        + '</tr>');



 $("#btnReinvestigate").click(function(){
        alert("Hello Worlds!");
     });

     $("#btnPreview").click(function(){
        alert("Hello World!");
     });

Thanks and Regards

Answer 1

Appending rows where elements share the same id is semantically invalid.

In fact, you can do away with the id attribute on the buttons and instead utilise the name attribute.

You'll then want to delegate your click handlers to #AccountList

$('#AccountList')
  .on('click', 'button[name="btnReinvestigate"]', function () {
    alert('Reinvestigate')
  })
  .on('click', 'button[name="btnPreview"]', function () {
    alert('Preview')
  });