我创建了一个用户支持系统,让用户可以联系我网站的版主,以防他们需要有关他们帐户的帮助,而不是相反。
截至最近,发送给用户或由用户发送的 新邮件只有在刷新页面时才会加载 ,这不是很方便,因为用户可能会在没有用户的情况下注销令人耳目一新,因此不会很快得到消息。
为了解决这个问题,我考虑实施setInterval()
每1分钟发送一次AJAX请求 并从数据库重新加载消息,以便新的存在它们将被展示。
虽然它确实可以正常工作并重新加载邮件,但当我点击邮件打开邮件并阅读 时,onclick
事件未被触发 。所有消息都会发生这种情况,无一例外。
我认为问题在于setInterval()
每分钟重新加载所有邮件,而不是检查是否存在新邮件,只在这种情况下重新加载 ,但尽管在我的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"> </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¬if_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>
答案 0 :(得分:3)
您使用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
});