javascript - 后续 anchor 标记在 html/php 中不起作用

Question

我试图在 html 中点击用户链接时提醒每个用户的个人 ID。因此，每个用户都会从数据库中获取并作为链接显示在页面上。另外，由于他们有一个唯一的电子邮件 ID，我试图在单击该用户链接时提醒他们的电子邮件。我的问题是，每当我单击第一个时，它都会发出电子邮件警报，但第二个、第三个等等，单击时不会弹出任何警报。

这是代码片段:

<strong><a href="#" id="post_user" name="post_user" class="<?php echo $messagePost_Email; ?>"><?php echo $messagePost_FirstName.' '.$messagePost_LastName;?></a></strong>

Jquery

<script type="text/javascript">

  $(function(){
    $("#post_user").click(function(){
      var element = $(this);
      var emailID = element.attr("class");
      var info = "emailID="+emailID;
      alert(info);
      $.ajax({
        tpye : "POST",
        url : "navigate.php",
        data: info,
        success : function(){

        }
      })
    })
  })

</script>

任何建议都会有很大帮助，因为我无法找出这种行为的根本原因。

Answer 1

问题是您可能为每个 anchor 元素使用相同的 id 属性:

<strong><a href="#" id="post_user" ...

id 属性是一个标识符，因此必须是唯一的。

您应该去掉 id 属性(如果您不在其他地方使用它)，并使用 class 作为 jQuery 选择器。例如:

<strong><a href="#" class="post_user" ...

emailID(您的用户 ID)存储在 data attribute 中元素的，因为它是做这些事情的更清晰的方式。这就是 data 属性最适合的用途。

<a href="#" class="post_user" data-emailID="<?php echo $messagePost_Email; ?>" ...

jQuery:

$(function(){
    $(".post_user").click(function(){
        var emailID = $(this).attr("data-emailID");
        //  or:
        //  emailID = $(this).data("emailID");
        alert(emailID);
        $.ajax({
            type    : "POST",
            url     : "navigate.php",
            data    : {emailID : emailID},
            success : function(response){
                // ... do anything with "response" ...
            }
        })
    })
})