如何实现类似Facebook的点击记录？jQuery绑定click事件失效求助

首先，你的代码存在核心错误：所有<a>标签使用了重复的id="current"，HTML规范要求页面内的id必须唯一，这会导致jQuery的事件绑定仅对第一个匹配元素生效，后续<a>标签的点击事件无法被捕获。

1. 修正HTML结构 #

将重复的id改为唯一值，用class标识同组元素，保留name属性用于区分：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" id="link1" name="text1" class="current-link">a</a>
<a href="#" id="link2" name="text2" class="current-link">b</a>
<a href="#" id="link3" name="text3" class="current-link">c</a>
<a href="#" id="link4" name="text4" class="current-link">d</a>
<!-- 存储选中状态的隐藏输入框，方便后续提交给PHP -->
<input type="hidden" id="selectedLink" name="selectedLink" value="">

2. 修正jQuery事件绑定 #

确保捕获所有<a>标签的点击事件，同时阻止默认跳转行为（避免页面刷新打断交互）：

$(document).on('click', '.current-link', function(e) {
  // 阻止默认跳转
  e.preventDefault();
  // 获取当前点击元素的标识
  var linkName = $(this).attr('name');
  var linkId = $(this).attr('id');
  alert(`点击的链接name：${linkName}，id：${linkId}`);
  
  // 将选中状态存入隐藏输入框
  $('#selectedLink').val(linkName);
});

3. 传递状态给PHP的两种方式 #

方式一：表单提交 #

通过表单提交隐藏输入框的值：

<form method="post" action="your-php-file.php">
  <!-- 上述a标签和隐藏输入框 -->
  <button type="submit">提交</button>
</form>

PHP中获取值：

<?php
if(isset($_POST['selectedLink'])){
  $selected = $_POST['selectedLink'];
  echo "选中的链接：".$selected;
}
?>

方式二：AJAX异步传递 #

无需刷新页面，直接将状态传给PHP：

$(document).on('click', '.current-link', function(e) {
  e.preventDefault();
  var linkName = $(this).attr('name');
  
  $.ajax({
    url: 'your-php-file.php',
    method: 'POST',
    data: {selectedLink: linkName},
    success: function(response) {
      console.log("PHP返回结果：", response);
    }
  });
});

PHP处理代码与表单提交方式一致。

内容的提问来源于stack exchange，提问作者Jose A. Hutchins