layer弹窗在事件委托中不起作用，不提示信息

Question

使用事件委托的方法赋予一组 li layer.tips( ) 的方法，但是无故这个地方不生效。

<ul class="nav_left_ul">
                            <!-- 主页 -->
                            <li><i class="blogfont blogziyuanzhuye" data-tip="主页"></i></li>
                            <li><i class="blogfont blogicon-yingyong" data-tip="分类"></i></li>
                            <li><i class="blogfont blogCDNHub" data-tip="时间轴"></i></li>
                            <li><i class="blogfont blogyaoqinghaoyou" data-tip="关于"></i></li>
                        </ul>

let nav_left_ul = $(".nav_left_ul");
        nav_left_ul.on("mouseover", function(event) {
            let content = $(event.target).attr("data-tip");
            这里可以正确打印data-tip
            console.log(content);
            这里无法正常显示
            layer.tips(content);
        });

并且不出现任何报错，求教！

Answer 1

参考GPT和自己的思路：

根据你的代码，似乎是在使用 layer.tips()方法的时候出现了问题。可能是因为在事件委托的方式下，弹窗需要绑定到具体的元素上才能生效，但是你是将该事件委托到了整个ul上，导致 layer.tips()无法正确绑定到对应的li元素上。

建议你将事件委托到li元素上，例如：

nav_left_ul.on("mouseover", "li", function(event) {
  let content = $(event.target).attr("data-tip");
  layer.tips(content, this);
});

在这个例子中，我们使用了事件委托到li元素上，然后再使用layer.tips()。注意要将this作为第二个参数传递给layer.tips()来让它正确绑定到当前的li元素上。

希望这个解决方案能解决你的问题。