如何通过ID为<li>标签添加点击事件监听器？及失效问题解决

核心问题：重复的ID属性 #

HTML规范明确要求id属性在整个文档中必须唯一。你给三个<li>都设置了id="Title"，jQuery的$('#Title')只会选中第一个匹配的元素，因此只有第一个列表项点击会生效，后两个完全无响应。

修复方案 #

方案1：改用class选择器（推荐，适配批量元素） #

将所有<li>的id替换为class，再通过class选择器绑定点击事件：

修改后的HTML代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="list-item"> List 1 </li>
<li class="list-item"> List 2 </li>
<li class="list-item"> List 3 </li>

修改后的JavaScript代码：

$('.list-item').on('click', function(){
  console.log("List was clicked.");  
});

方案2：给每个元素设置唯一ID #

如果需要单独区分每个列表项，可以给每个<li>设置不同的唯一ID，再通过属性选择器统一绑定：

修改后的HTML代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="title-1"> List 1 </li>
<li id="title-2"> List 2 </li>
<li id="title-3"> List 3 </li>

修改后的JavaScript代码：

$('[id^="title-"]').on('click', function(){
  console.log("List was clicked.");  
});

额外注意：确保脚本在DOM加载完成后执行 #

如果你的脚本写在<head>标签内，或者放在<li>元素之前，可能会因为DOM还未渲染完成就执行绑定，导致事件失效。可以把脚本放在</body>标签前，或者用$(document).ready()包裹代码：

$(document).ready(function(){
  $('.list-item').on('click', function(){
    console.log("List was clicked.");  
  });
});

内容的提问来源于stack exchange，提问作者Dhenhice