动态追加的li元素无法访问：鼠标悬停无法获取文本问题

嘿，我来帮你搞定这个问题！你遇到的核心问题是动态生成的DOM元素无法直接绑定事件——因为页面加载完成后绑定事件时，这些li元素还不存在，所以直接用$('li').hover()这类方式肯定没效果。

解决方案：使用事件委托 #

jQuery的.on()方法支持事件委托，你可以把事件绑定到已经存在的父元素上（比如你的.level1 ul），然后监听子元素（li）的悬停事件。这样不管后来动态添加多少li，事件都能正常触发。

具体代码如下：

// 事件委托：绑定到父元素，监听li的鼠标进入事件
$(".level1 ul").on("mouseenter", "li", function() {
    // 获取当前li的文本内容，trim()可去除多余空格
    var liText = $(this).text().trim();
    console.log("悬停的li文本：", liText);
    // 这里可以添加你需要执行的逻辑，比如把文本显示到指定区域
});

// 如果需要监听鼠标离开事件，可单独绑定mouseleave
$(".level1 ul").on("mouseleave", "li", function() {
    // 鼠标离开时的操作，比如清除显示的文本
    console.log("鼠标已离开li元素");
});

或者你也可以用hover的简写形式（它是mouseenter和mouseleave的组合）：

$(".level1 ul").on("hover", "li", function() {
    // 鼠标进入时的操作
    var liText = $(this).text().trim();
    console.log("进入li：", liText);
}, function() {
    // 鼠标离开时的操作
    console.log("离开li");
});

额外建议：修正HTML结构 #

你当前的代码是把<a>包裹在<li>外面，这不符合HTML规范（<a>是行内元素，不能包含块级元素<li>），建议调整成<li>包裹<a>的结构，语义更正确，也能避免一些潜在的兼容性问题：

// 修正后的动态追加代码
$(".level1 ul").append('<li><a href="'+value.url+'">' + value.name + '</a></li>');

如果这样修改，你要获取文本的话，直接取$(this).text()（这里的this指向li元素），或者取$(this).find('a').text()，效果是一致的。

内容的提问来源于stack exchange，提问作者Daniel I.