Register Event listener onto a table that has has been created dynamically through AJAX

Question

I have a HTML interface that shows a dialog when the search button is clicked. The dialog has a text field where the user types a search string, and through Ajax the system uses PHP file to get data from the database and return data inform of a table

//code for dialog
    <script>
$(function() {
   $( ".comment").click(function(){ 
       $( "#dialog-modal" ).dialog({
          height: 140,
          modal: true,
          width : 440
        });
       $( "#dialog-modal" ).show();
    });
 });
</script>


<div class="inner2">
   <p><button class="more comment " type='button' ></button></p>

   <div id="dialog-modal" style="display:none">
    <input name="searchPat" id="searchPat" type="text" onkeyup="searchPatient(this.value)"  /> <input type="submit" id="submit" name="submit" value="Register Patient" /><br />
    <div id="newtable" >
    </div>
   </div>
 </div>

//searchPatient function
   <script>
     function searchPatient(str) {
       var xhttp;
       if (str.length < 3) { 
          return;
       }
       xhttp = new XMLHttpRequest();
       xhttp.onreadystatechange = function() {
       if (xhttp.readyState == 4 && xhttp.status == 200) {
         document.getElementById("newtable").innerHTML = xhttp.responseText;
        }
       };
       xhttp.open("GET", "/clinicosight/lib/getPatient.php?q="+str, true);
       xhttp.send(); 

      }

    </script>
  
//getPatient.php
            $pat_no = $_REQUEST["q"];
            $name="";

            $query = "select patient_no, surname || ' ' || other_name as name,residence,year_of_birth from hp_outpatient_register where patient_no ilike '%$pat_no%' ";
            $con = @pg_connect("host=$serverIP dbname=$database user=$username password=$password");
            $result = pg_query($con, $query);

            $tab="";
            if ($result) {
                //$tab=$tab. "";
                 $tab=$tab. "<table border ='1' width='30%' id='searchtable' style='cursor: pointer;' > <tr>";

                if (pg_num_rows($result) > 0) {
                    //loop thru the field names to print the correct headers
                    $i = 0;
                    while ($i < pg_num_fields($result)) {
                        $tab=$tab. "<th>" . pg_field_name($result, $i) . "</th>";
                        $i++;
                    }
                    $tab=$tab. "</tr>";

                    //display the data
                    while ($rows = pg_fetch_row($result)) {
                        $tab=$tab. "<tr>";
                        foreach ($rows as $data) {
                            $tab=$tab. "<td align='center'>" . $data . "</td>";
                        }
                        $tab=$tab. "</tr>";
                    }

                }
                $tab=$tab. "</table>";
            }
            echo $tab;


 //code for table listener
<script>
var table = document.getElementById("searchtable");
   //alert("People");
    if (table != null) {
        for (var i = 0; i < table.rows.length; i++) {
            for (var j = 0; j < table.rows[i].cells.length; j++)
            table.rows[i].cells[j].onclick = function () {
                tableText(this);
            };
        }
    }


function tableText(tableCell) {
    alert(tableCell.innerHTML);
}

 </script>

So far, the dialog can display and once the user types text in the search text field, a dynamic table is created from the getPatient.php which is displayed on dialog. The problem is that the table created doesn't respond to the onclick event for the table.

Kindly assist on how to go about it, or let me know if there is something I'm missing.