jQuery绑定动态生成<li>点击事件无响应问题求助

核心原因：动态元素的事件绑定时机错误 #

你碰到的问题本质是事件绑定的时机不对。第二个$(document).ready()里的$('#list-middle li').click(...)是在页面首次加载完成时执行的，但这时候#list-middle里的<li>元素还不存在——它们是通过后续的AJAX请求（$.post）从file.php获取后才动态插入页面的。普通的.click()绑定只能作用于绑定事件时已经存在于DOM中的元素，所以这些动态生成的<li>自然不会响应点击事件。

解决方案：使用事件委托（Event Delegation） #

事件委托的思路是把事件绑定到一个页面加载时就存在的父元素上，让父元素监听子元素的事件触发。这样不管子元素是何时动态添加的，都能正常触发事件。

修改你的jQuery代码如下：

$(document).ready(function () {
    // 按钮点击触发AJAX请求
    $('#button-middle').click(function () {
        $.post('file.php', {
            data_1: $('#select_1 option:selected').text(),
            data_2: $('#select_2 option:selected').text()
        }, function (data) {
            $('#list-middle').html(data);
        });
    });

    // 用事件委托绑定动态li的点击事件
    $('#list-middle').on('click', 'li', function () {
        alert('test');
    });
});

这样不管#list-middle里的<li>是何时添加的，只要点击它们，事件都会被父元素#list-middle捕获并触发回调。

额外小问题：PHP中的参数接收笔误 #

你的PHP代码里有个容易忽略的小错误：

$data_1 = $_POST['data-1']; // 这里用了连字符

但你在AJAX请求里传递的参数是data_1（下划线），所以应该修正为：

$data_1 = $_POST['data_1'];

虽然你说返回的<li>能正常显示，可能是测试时数据碰巧没出问题，但这个错误会导致$data_1取不到正确值，建议及时修正。

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