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

Question

我创建了一个用户支持系统，以便用户在需要帐户或其他方面的帮助时可以联系我网站的版主。

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

为了解决这个问题，我考虑实现一个 setInterval() 发送一个 AJAX 请求每 1 分钟并从数据库重新加载消息，这样如果有新的存在，它们就会显示出来。

虽然它确实有效并重新加载消息，但当我单击消息将其打开并阅读时onclick事件不会触发。所有消息都会发生这种情况，无一异常(exception)。

我认为问题在于 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);

<小时/>

我只找到了this question在 Stack Overflow 上，这有点类似，但不幸的是那里的答案都没有解决我的问题。

Answer 1

您正在使用 on 直接绑定(bind) 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
});