onclick 事件不适用于重新加载元素

Question

我创建了一个用户支持系统，使用户能够联系我网站的版主，以防他们在帐户方面需要帮助，反之亦然。

最近，发送给用户或用户发送的新消息只有在刷新页面时才会加载，这不是很方便，因为用户可能会在不刷新的情况下退出，因此不会很快收到消息。

为了解决这个问题，我想实施一个 setInterval() 发送一个 AJAX 请求 每 1 分钟 并从数据库中重新加载消息，以便在存在新消息时显示它们。

虽然它确实有效并会重新加载消息，但当我单击一条消息将其打开并阅读时 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);

我只在 Stack Overflow 上找到了 this question，这有点相似，但不幸的是 none 的答案解决了我的问题.

Answer 1

您正在使用 on 直接绑定 onclick 事件。你应该使用 event delegation.

可以这样写onclick事件

$(document).on("click", ".user-notifs",function() {
   //script goes here
});

您还可以使用更接近目标元素的父元素来代替 document。

$(class_or_id_of_closer_parent_ele).on("click", ".user-notifs", function() {
    //script goes here
});

onclick 事件不适用于重新加载元素

The onclick event doesn't work on reloading elements

javascript

php

ajax

jquery

setinterval

我的 PHP 通知代码：

我的 `onclick` 活动代码：

我的 `setInterval()` 代码：

onclick 事件不适用于重新加载元素

The onclick event doesn't work on reloading elements

javascript

php

ajax

jquery

setinterval

我的 PHP 通知代码：

我的 onclick 活动代码：

我的 setInterval() 代码：

我的 `onclick` 活动代码：

我的 `setInterval()` 代码：