Javascript modal on element loaded dynamically after DOM load

Question

Been trying to figure this out for a few days and I believe the issue has to do with event delegation, but I'm unsure how to solve it.

I have a website that loads a list of employees from the database. Each employee is placed in a card and when the card is clicked, a modal appears with additional information about the employee.

There are different departments, so in a top menu I dynamically load the department list from the database. I can then click on a department and use AJAX to only display the employees from the selected department. It looks exactly the same as the initial load, however the modal doesn't work. When I look at the dev tool, I can see the data loaded for the department. Everything needed is loaded, except the modal will not open. I can use the inspector to see the information is all loaded correctly, but I think the issue is that it was loaded to the page without a refresh.

I even tried to place the javascript in the get_organization_data.php in hopes it would work - but it didn't.

Any thoughts?

EDIT I think there is a possibility that the php code used to output the organizations from the AJAX call could be the problem. On the initial load of the page, the HTML looks like this (I know the php needs to use PDO - this is just quick and easy for testing :) ). The get_organization_data.php is below as well.

<section class="container main_section">

    <?php
    $all_employees_query = "SELECT id, first_name, last_name, roles_title, organization_title, employee_photo
                            FROM employees 
                            INNER JOIN roles ON employees.roles_id = roles.roles_id
                            INNER JOIN organization ON employees.organization_id = organization.organization_id
                            ORDER BY last_name ASC";
    $all_employees = mysqli_query($conn, $all_employees_query);
    ?>
    <?php
    while ($employee = mysqli_fetch_assoc($all_employees)) : ?>
       <a name="id" id="<?= $employee['id'] ?>" class="employee_profile">
            <div class="employee_card">
                <img src='employee-photos/<?= $employee['employee_photo'] ?>' alt="">
                <h2><?= $employee['first_name'] . ' ' . $employee['last_name'] ?></h2>
            </div>
        </a>

        <!-- Employee Modal -->
        <div id="show_employee_details" class="employee_modal hidden" data-id="<?= $employee['id'] ?>">
        </div>
    <?php endwhile; ?>

</section>

//get_organization_data.php


<?php

require "dbconnect.php";


// This is ID of organization
$id = $_POST['id'];


$sql = "SELECT id, first_name, last_name, roles_title, organization_title, employee_photo, employees.organization_id
        FROM employees 
        INNER JOIN roles ON employees.roles_id = roles.roles_id
        INNER JOIN organization ON employees.organization_id = organization.organization_id
        where employees.organization_id = $id
        ORDER BY last_name ASC";

$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($result)) {
    $id      = $row['id'];
    // echo "<script>console.log('$id' );</script>";
    echo "<div id='" . $row['id'] . "' class='employee_profile'>";
    echo "<a  name='id' id='" . $row['id'] . "' ";
    echo "<div class='employee_card'>";
    echo "<img src='employee-photos/" . $row['employee_photo'] . "' alt='employee image'>";
    echo "<h2>" . $row['first_name'] . " " . $row['last_name'] . "</h2>";

    echo "<h3>" . $row['organization_title'] . "</h3>";
    echo "</div>";
    echo "</a>";
    echo "</div>";

    // echo modal div
    echo "<div id= 'show_employee_details'  class='employee_modal hidden' data-id='" . $row['id'] . "'>";
    // echo '<div>' . $row['first_name'] . '</div>';
    // echo '<div>' . $row['last_name'] . '</div>';
    // echo '<div>' . $row['roles_title'] . '</div>';
    echo "</div>";
}
//Open modal when clicking on employee card        
document.addEventListener("click", (e) => {
      if (e.target.matches(".employee_card")) {
        details.classList.remove("hidden");
        details.classList.add("overlay");
      }
    });
//Close modal when clicking on overlay
    document.addEventListener("click", (e) => {
      if (e.target.matches(".overlay")) {
        details.classList.remove("overlay");
        details.classList.add("hidden");
      }
    });
These are the AJAX calls

        $(document).on("click", ".org", function () {
          id = $(this).attr("id");
          // alert(id);
        
          $.ajax({
            url: "logic/get_organization_data.php",
            method: "POST",
            data: {
              id: id,
            },
            success: function (data) {
              $(".main_section").html(data);
              // $(".employee_modal").html(data); //thought this may be needed?
            },
         
          });
        });
    
    $(".main_section").on("click", "a", function (event) {
      event.preventDefault();
      id = $(this).attr("id");
      // alert(id);
      $.ajax({
        url: "logic/get_employee_data.php",
        method: "POST",
        data: {
          id: id,
        },
        success: function (data) {
          $(".employee_modal").html(data);
        },
        error: function () {
          alert("Error");
        },
      });
    });

Answer 1

a priori you are not using the standard HTML5 dialog methods with <dialog> and .showModal()...
see : https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal

As for the event delegation system it should rather look like this:

document.addEventListener('click', (e) => 
  {
  // Open modal when clicking on employee card       
  if (e.target.matches('.employee_card')) 
    {
    details.classList.replace('hidden','overlay');
    return;
    }

  //Close modal when clicking on overlay
  if (e.target.matches('.overlay')) 
    {
    details.classList.replace('overlay','hidden');
    }
  }
);