javascript — событие onclick не работает при перезагрузке элементов

Я создал систему поддержки пользователей, чтобы пользователи могли обращаться к модераторам моего сайта, если им нужна помощь с учетной записью и наоборот.

По состоянию на последнее время новые сообщения, отправленные или загруженные пользователями, загружаются, только если страница обновлена, что не очень удобно, поскольку пользователь может выйти без обновления и, следовательно, не получить сообщение в ближайшее время.

Чтобы противостоять этому, я подумал о setInterval() отправка запроса AJAX каждую минуту и перезагрузка сообщений из базы данных, так что, если новые существуют, они будут показаны.

Хотя это на самом деле работает и перезагружает сообщения, когда я нажимаю на сообщение, чтобы открыть его и прочитать его onclick событие не сработало. Это происходит для всех сообщений без исключения.

Я думал, что проблема была в том, что setInterval() перезагружать все сообщения каждую минуту вместо того, чтобы проверять, существуют ли новые сообщения, и перезагружать их только в этом случае, но, несмотря на выполнение этой проверки в моем PHP-файле, проблема все еще сохраняется.

Мой PHP-код для уведомления:

<?php
$message_status = ($status[$a] === "Read") ? "-open" : ""; ?>
?>

<div class="dashboard-notifs-content">
<p>
<i class="fa fa-folder<?php echo $message_status; ?> fa-fw">&nbsp;</i>
<a class = "user-notifs" notif-id = "<?php echo $ID[$a]; ?>"subject = "<?php echo $subject[$a]; ?>" message = "<?php echo $message[$a]; ?>"status = "<?php echo $status[$a]; ?>"><?php echo $subject[$a]; ?></a>
</p>
</div>

Мой код для onclick событие:

// Show message in preview
$(".user-notifs").on("click", function() {
// Declare variables and assign to them the content of their respective attributes
var current = this;
var id = this.getAttribute("notif-id");
var subject = this.getAttribute("subject");
var message = this.getAttribute("message");
var status = this.getAttribute("status");

// Assign notification-id to the preview window
document.getElementById("user-notif-preview").setAttribute("notif-id", id);

// Display the preview lightbox and show the message
lightbox.style.display = "block";
document.getElementById("user-subject").value = subject;
document.getElementById("user-message").value = message;

/* Check if the notification has already been opened
to mark it as read in the database */
if (status === "Unread") {
// Mark notification as opened
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState === 1) {
current.previousElementSibling.className = "fa fa-folder-open fa-fw";
}
};
xhttp.open("POST", "notifs.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("notif_status=Read&notif_id=" + id);
}
});

Мой код для setInterval():

var notifications = document.getElementById("dashboard-notifs");

// Update the notifications
setInterval(function() {
var yhttp = new XMLHttpRequest();
var number = $("#dashboard-notifs").children(".dashboard-notifs-content").length;
yhttp.onreadystatechange = function() {
if (yhttp.readyState === 4 && yhttp.status === 200) {
// Display the notifications if the response is not empty
if (yhttp.responseText.length !== 0) {
notifications.innerHTML = yhttp.responseText;
}
}
};
yhttp.open("POST", "update.php", true);
yhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
yhttp.send("content=notifs&number=" + number);
}, 5000);

Мне удалось только найти этот вопрос на переполнение стека, что-то похожее, но, к сожалению, ни один из ответов там не решает мою проблему.