观点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=" 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"></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=" 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"></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或者性能影响,毕竟不是前端程序员,对于这些不熟,望见谅,其他同学也可以发表自己建议。