CodeIgniter动态HTML中AJAX无法获取data-id问题求助

阿华AIGC实验室

2026-5-9

解决CodeIgniter中动态生成元素无法触发AJAX点击事件的问题

我看你遇到了典型的动态元素事件绑定失效问题：页面初始加载的<a>标签能正常触发点击获取data-id，但AJAX异步生成的新元素就完全没反应——这是因为你用的是直接事件绑定方式，它只会给页面加载时已经存在的元素绑定事件，后续动态添加的元素根本没被“纳入”事件监听范围。

核心解决方案：改用事件委托

事件委托利用了DOM的事件冒泡机制，把事件绑定到一个始终存在的父级元素（比如页面最外层的<ul>或者document），然后通过选择器过滤出我们要监听的目标元素。这样不管元素是初始加载还是后来动态生成的，都能触发事件。

修改后的AJAX代码如下：

<script>
// 绑定到document（或更接近的父容器，比如最外层的ul），监听带data-id属性的a标签点击
$(document).on('click', 'a[data-id]', function() {
    var pid = $(this).data("id");
    
    // 先判断pid是否有效，避免无意义请求
    if (!pid) return;

    alert(pid);
    $.ajax({
        url: "<?php echo base_url(); ?>get-tree-data",
        method: "POST",
        data: { pid: pid },
        success: function(result) {
            if (result == 'not') {
                alert('No partner here !!');
            } else {
                $("#" + pid).html(result);
            }
            console.log("Response======>" + result);
        },
        // 新增错误处理，方便调试
        error: function(xhr) {
            alert('请求出错，请稍后重试');
            console.error(xhr.responseText);
        }
    });
});
</script>

为什么这样有效？

当你点击动态生成的<a>标签时，事件会顺着DOM树向上冒泡到我们绑定的父元素（这里是document），然后通过第二个参数'a[data-id]'过滤出触发事件的目标元素，从而执行对应的回调逻辑——不管元素是何时添加到页面的，都能被正确监听。

额外优化建议

模型代码规范化：当前模型直接echo HTML的方式不太利于维护，建议返回JSON格式的数据，前端再负责渲染：

// 模型修改示例
public function get_tree_by_ajax() {
    $pid = $this->input->post('pid');
    $response = ['status' => 'success', 'html' => '', 'message' => ''];
    
    if (!empty($pid)) {
        // ... 你的查询逻辑 ...
        // 把生成的HTML赋值给$response['html']
        // 如果没有子节点，设置$response['status'] = 'empty'，$response['message'] = 'No partner here !!'
    } else {
        $response['status'] = 'error';
        $response['message'] = 'Invalid ID';
    }
    
    echo json_encode($response);
    exit;
}

前端对应修改AJAX的success回调：

success: function(response) {
    response = JSON.parse(response);
    if (response.status === 'empty') {
        alert(response.message);
    } else if (response.status === 'success') {
        $("#" + pid).html(response.html);
    } else {
        alert(response.message);
    }
}