使用jQuery和PHP获取<li>文本时，循环点击仅触发首个值的问题

你的问题出在两个核心点上：重复的id属性和不合适的事件绑定方式，咱们一步步来解决：

1. 先修复HTML结构的问题 #

PHP循环生成的所有<li>都用了同一个id="select_cat"，但HTML规范里id是唯一标识符，浏览器只会识别第一个带有该id的元素——这就是为什么不管点哪个li，alert的都是第一个的内容。

先修改PHP代码，把id换成class（class用来标识一组同类型元素）：

<?php foreach ($query->result() as $row){ 
    // 用class替代id，避免重复标识
    echo '<li class="select_cat">'.$row->category_name.'</li>'; 
} ?>

2. 用事件委托绑定点击事件 #

因为你的li是通过AJAX动态加载的，直接给元素绑定事件会失效（加载时元素还不存在），所以要用事件委托——把事件绑定在已经存在的父元素上（比如包裹li的ul，或者document），由父元素监听子元素的点击。

修改后的jQuery代码如下：

$(document).ready(function(){
    // 事件委托：监听document下所有.select_cat的点击事件
    $(document).on('click', '.select_cat', function(){
        // $(this)指向当前被点击的li元素
        alert($(this).text());
    });

    // 你的AJAX请求逻辑
    $.ajax({
        type:"GET",
        url: "你的请求URL",
        success: function(response){
            // 把返回的li渲染到页面容器里，比如：
            // $('#category-list').html(response);
        }
    });
});

为什么原来的方式不行？ #

• 重复id的问题：当你在select_category()函数里用$('#select_cat').text()时，jQuery只会找到第一个带有该id的元素，所以永远弹出第一个li的内容。
• 内联事件的局限性：即使你把内联事件改成onclick="select_category(this)"（把当前元素传进去），虽然能临时解决，但对于动态加载的元素来说，事件委托是更优雅、更可靠的方案，还能做到JS和HTML结构分离，便于后续维护。

可选：如果一定要保留内联事件（不推荐） #

如果你暂时不想改事件绑定方式，可以修改PHP和JS如下：

<?php foreach ($query->result() as $row){ 
    echo '<li onclick="select_category(this)">'.$row->category_name.'</li>'; 
} ?>

function select_category(element){
    // 通过传入的element参数获取当前点击的li文本
    alert($(element).text());
}

但还是更推荐前面的事件委托方案，尤其是项目规模较大时，代码可维护性更高。

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