Question

今天，当我尝试在PHP和AJAX中创建通知系统时，我遇到了一个问题。

所以我正在做的是首先从数据库中获取通知行，然后使用delete选项显示它。所有行都有记录号。具有记录属性。因此，当用户点击删除图标时，我想将该ID发送到删除页面。

这是我的代码 -

<?php

$email = $_SESSION[memberemail];
$unreadnotif = mysqli_query($conn, "SELECT * FROM notifications WHERE sendto='$email' AND status='unread' ORDER BY id DESC ");
$countunreadnotif = mysqli_num_rows($unreadnotif);

?>

<div class='list'>
<ul>
    <li style='font-size:30px'><center><i class='fa fa-bell-o'></i> Latest Notifications <span data-balloon="Refresh" data-balloon-pos="left" class='float-right ref-notif'><i class='fa fa-refresh'></i></span></center></li>
    <?php
if (mysqli_num_rows($unreadnotif) == 0) {
?>
    <center><i class='fa fa-eye-slash' style='font-size:40px'></i><br><span style='font-size:15px;font-family:roboto'>No notifications to show</span></center>
    <?php
}

else {

  while($row = mysqli_fetch_array($unreadnotif)) {
        ?><li record="<?php echo $row["id"]; ?>"><?php echo $row["message"];?> <span id='delete-notif' class='float-right' data-balloon="Delete forever" data-balloon-pos="left"><i class='fa fa-trash'></i></span>  <span class='float-right' data-balloon="<?php echo $row["createdon"]; ?>" data-balloon-pos="left"><i class='fa fa-clock-o'></i></span></li><?php
    }

}
    ?>
</ul>
        </div>
</div>
<!--Ends-->


<script type="text/javascript">
$(document).ready(function(){ 
    $(".ref-notif").click(function(){ 
    $(".notif-box").load("getnotifcount.php");
  });

$("#delete-notif").click(function(){
var notifid = $(this).parent().attr("record");

$.post("deletenotif.php",{deleteid:notifid},function(data){
    $("#result3").html(data);
});

$(this).parent().fadeOut()

});


});
</script>

<div id='result3'></div>

问题 - 当我点击第一个通知删除图标时，只有它正在删除记录，即如果我们点击第二个或更高的通知，则点击处理程序不起作用！

请帮忙。

在此先感谢:)

Answer 1

使用时

$("#delete-notif").click(function(){ ..

它只适用于第一个实例。对于他们所有人都使用这样的东西：

$("[id=delete-notif]").forEach(function(ele) {
    ele.click(function() {
        var notifid = $(this).parent().attr("record");

        $.post("deletenotif.php",{deleteid:notifid},function(data){
             $("#result3").html(data);
        });

        $(this).parent().fadeOut()
    }
});

参考 - How to select all elements with a particular ID in jQuery?

Answer 2

疑难杂症！经过一番搜索，我发现使用id不会受益，所以我使用了类选择器，它运行了！

Answer 3

您似乎在同一页面上有多个元素ID

while($row = mysqli_fetch_array($unreadnotif)) {
    ?><li record="<?php echo $row["id"]; ?>"><?php echo $row["message"];?> <span id='delete-notif' class='float-right' data-balloon="Delete forever" data-balloon-pos="left"><i class='fa fa-trash'></i></span>  <span class='float-right' data-balloon="<?php echo $row["createdon"]; ?>" data-balloon-pos="left"><i class='fa fa-clock-o'></i></span></li><?php
}

所有记录都具有相同的ID，但元素ID在DOM（页面）中应该是唯一的。这意味着click事件将仅绑定到具有该ID的第一个元素。

我通常使用的解决方法是为ID添加唯一标识符，有效地为每个删除按钮创建唯一ID。然后使用与所有可删除项匹配的选择器绑定click事件处理程序，并使用$(this)

引用它们

这可能是添加项目：

while($row = mysqli_fetch_array($unreadnotif)) { ?>
<li record="<?php echo $row["id"]; ?>"><?php echo $row["message"];?> <span id='delete-notif-<?php echo $row["id"]; ?>' class='float-right' data-balloon="Delete forever" data-balloon-pos="left"><i class='fa fa-trash'></i></span>  <span class='float-right' data-balloon="<?php echo $row["createdon"]; ?>" data-balloon-pos="left"><i class='fa fa-clock-o'></i></span></li><?php
}

然后事件绑定，选择一个更合适的选择器

<script type="text/javascript">
$(document).ready(function(){ 
  $(".ref-notif").click(function(){ 
  $(".notif-box").load("getnotifcount.php");
  });

$("li").click(function(){
  var notifid = $(this).parent().attr("record");

  $.post("deletenotif.php",{deleteid:notifid},function(data){
  $("#result3").html(data);
  });

  $(this).parent().fadeOut()

  });

});
</script>

在PHP中创建实时通知系统需要帮助

3 个答案: