先前通过AJAX插入数据后，从Main文件中执行AJAX

Question

I have a questions for which I need some help. I have a page which, after it is finished loading, executes an AJAX, creates a table in PHP containing 2 buttons: 1 change password, the other is delete. Once the table is complete it is injected into a div in the main file. That works great so far. Now after that table is loaded, I want to be able to call another AJAX function linked in the JS file in the main page. So I have 3 components: 1. <div id="DbInfo"></div> That is where I add the information from the users.

1. my php which executes the code and gets the information from my database.

   if (mysqli_connect_errno()) {
       echo "Failed to connect to MySQL: " . mysqli_connect_error();
   }
   $sql = "SELECT LoginName FROM table";
   
   $res = mysqli_query($conn, $sql);
   
   if (mysqli_num_rows($res) > 0) {echo "<center>";
       echo "<table border='1'>";
       echo "<tr>";
       echo "<td>User</td>";
       echo "<td colspan=2 align=center>Available Functions</td>";
       echo "</tr>";
   
       while($row = mysqli_fetch_assoc($res)) {
           echo "<tr>";
           echo "<td>" . $row['User'] . "</td>";
           echo "<td><button type='button' class='smallbutton' id='removeUser' value='" . $row['LoginName'] . "'>Delete User</button></td>";
           echo "<td><button type='button' class='smallbutton' id='CPW' value='" . $row['LoginName'] . "'>Change Password</button></td>";
           echo "</tr>";
        }
       echo "</table>";
       echo "</center>";
   } else {
       echo "";
   }
   mysqli_close($conn);
   

And lastly the AJAX which does the injection of the created table into the HTML:

$(document).ready(function(){
    $.ajax({
        method: "POST",
        url: "UserData.php",
        success: function(data){
            //document.getElementById("DbInfo").innerHTML = data;
            document.getElementById("DbInfo").html(data);
        }
    });
});

Again, these functions are working fine. What I want to do after the page is done, be able to click one of these injected buttons and execute another AJAX. Unfortunately the standard declaration that I use for AJAX does not work.

$(document).ready(function(){
$("#removeUser").click(function(){

The question: How can I make sure after the table is injected, that I can call an AJAX function which is linked as an external source (<script src="script.js"></script>) in the main document?

Thanks for your help.

Answer 1

try :

$('#DbInfo').on('click', 'button[id="removeUser"]', function(i,e){
    console.log('remove :' + $(this).val());
});