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

Question

我创建了一个用户支持系统，让用户可以联系我网站的版主，以防他们需要有关他们帐户的帮助，而不是相反。

截至最近，发送给用户或由用户发送的 新邮件只有在刷新页面时才会加载 ，这不是很方便，因为用户可能会在没有用户的情况下注销令人耳目一新，因此不会很快得到消息。

为了解决这个问题，我考虑实施setInterval()每1分钟发送一次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);

我只能在Stack Overflow上找到this question，这有点类似，但遗憾的是 没有一个答案可以解决我的问题 。< / p>

Answer 1

您使用onclick直接绑定on事件。您应该使用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
});