layui tips 无法吸附在 表格中 template 中的 checkbox 组件上

因为 在 template 属性中 checkbox 类型的 input。

在渲染页面时 会 额外生成一个 div 用来替代 input ，进行选择框的显示，而 真正的 input 就会被隐藏

下面是页面渲染后，显示的 div ：

<div class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch">
    <em>启用</em>
    <i></i>
</div>

而这个 div 因为是后面代码生成的所以无法被直接选中，而 input 也因隐藏无法吸附

导致 tips 无法吸附到对应 template 上，所以 tips 使用不了

解决方案：

1. 使用 layui 自带的 监听单元格点击事件 ，在点击 checkbox 的时候弹出tips。

//监听行单击事件
table.on('row(test)', function(obj){
  console.log(obj.tr) //得到当前行元素对象
  console.log(obj.data) //得到当前行数据
  //obj.del(); //删除当前行
  //obj.update(fields) //修改当前行数据
});

这样就能实现 tips 吸附到 checkbox上了 （实际是吸附到了checkbox所在的单元格上）。

2. 因为 layui 只提供了 单双击单元格 监听，从而鼠标其他事件无法实现。要想实现就只能用其他方法

比如 鼠标移入事件：

因为 checkbox 的 input 会被隐藏所以不考虑，那么就要自己再创建一个不会被隐藏的 div ，用来绑定事件。

<script type="text/html" id="itemStatus">
	<div style="z-index: 3; width: 80px;height: 30px;position: absolute;" onmouseover="a(this)" onmouseout="b()" onclick="c(this)"></div>
	<input type="checkbox" lay-filter="itemStatus" value="{{d.id}}" lay-skin="switch" lay-text="启用|关闭" {{d.status==1? 'checked': ''}} />
</script>

在 template 中 添加一个没有内容的 div，设置高宽，让其显示在 checkbox 的上面（注意要加position: absolute;否则会把input挤出去）

再给这个 div 添加 触发函数事件

layui 函数的正确使用姿势：

window.a = function(obj){
    layer.tips('1111',obj,{
        tips: [1, '#0FA6D8']
    });
}
		
window.b = function(){
    layer.closeAll('tips');
}

window.c = function(obj){
    $(obj).next().next().click();
}

像这样定义在 layui.use(); 里就可以使用了  

结果：

 

注意事项：

1. 方法2 的使用，会导致无法点击 checkbox控件。如果想实现鼠标移入提示的同时 又可以点击，需要再绑定点击事件，并在点击事件中去模拟触发 checkbox 的点击( 实例 方法 c(this)  可以在上面看到)