pjax+layui遇到的坑

Posted 2021-01-09 adust

观点1：当使用layui中elment.on或form.on事件（也就是所有利用layui里面的on去绑定事件）时，利用pjax加载页面，并且多个页面包含相同

lay-filter元素时，其他页面绑定的lay-filter元素事件处理会使本页面具有相同lay-filter元素也同样具有事件处理程序。

观点2：

layui里面的on绑定事件只有最后一次绑定的生效，与jquery里面的on绑定同一事件多次，则会多次生效的结果不同。

下面举例：

页面1DOM结构如下：

<form data-pjax class="layui-form" action="admin/role">
    <div class="layui-form-item">
   　　 <div class="layui-inline">
        　　<label class="layui-inline">名称</label>
        　　<div class="layui-inline" style="width: 300px;">
        　　　　<input type="text" name="name" placeholder="请输入角色名称搜索"  autocomplete="off" class="layui-input" value="#(name??)" />
　　　　　　</div>
　　　　　　<div class="layui-inline">
　　　　　　　　<button class="layui-btn" id="searchBtn" lay-submit lay-filter="searchBtn">
　　　　　　　　　　<i class="layui-icon">&#xe615;</i>搜索
　　　　　　　　</button>
　　　　　　</div>
　　　　</div>
　　</div>
</form>            

里面包含一个lay-filter为searchBtn的元素

页面2DOM结构如下：

<form data-pjax class="layui-form" action="admin/role">
    <div class="layui-form-item">
   　　 <div class="layui-inline">
        　　<label class="layui-inline">名称</label>
        　　<div class="layui-inline" style="width: 300px;">
        　　　　<input type="text" name="name" placeholder="请输入角色名称搜索"  autocomplete="off" class="layui-input" value="#(name??)" />
　　　　　　</div>
　　　　　　<div class="layui-inline">
　　　　　　　　<button class="layui-btn" id="searchBtn" lay-submit lay-filter="searchBtn">
　　　　　　　　　　<i class="layui-icon">&#xe615;</i>搜索
　　　　　　　　</button>
　　　　　　</div>
　　　　</div>
　　</div>
</form> 

 里面包含一个lay-filter为submitBtn的元素。

说明：其中页面1无任何事件绑定，

页面2利用一下代码，绑定了表单提交事件（这里故意绑定了页面1中存在的元素）

form.on("submit(searchBtn)",function(){
   alert("我是页面2的事件处理程序"); 
})

 

 实验：

当进入页面1点击搜索按钮时，页面正常进行pjax提交；当进入页面2再返回页面1时，点击搜索按钮会弹出提示框(我是页面1的事件处理程序）。

这就说明页面2绑定的事件在页面1已经起作用了，这就验证了我们观点1。

继续：

如果在页面1中添加如下事件绑定代码

form.on("submit(searchBtn)",function(){
   alert("我是页面1的事件处理程序"); 
})

 这个时候不管是 打开页面1-打开页面2-回到页面1，还是打开页面2-打开页面1；点击页面1的搜索按钮都只会弹出提示框（我是页面2的事件处理程序）。

这就验证了观点2：只会最后一次事件处理程序生效。

解决办法：

1 如果页面不会对该元素进行事件处理，则不要设置lay-filter属性，或则每个页面元素设置唯一的lay-filter值。

2  经过对layui源码分析，发现之所以出现这种跨pjax页面事件串行，是因为layui对事件进行了cache，我们只需要在pjax加载页面之前清空cache事件即可，代码如下

layui.use([‘element‘], function() {
    $(document).on(‘pjax:start‘, function() { 
        layui.cache.event={};
    });
}) 

 建议按照方法1进行，方法2没有经过大量测试，不知道是否会有其他BUG或者性能影响，毕竟不是前端程序员，对于这些不熟，望见谅，其他同学也可以发表自己建议。