pjax+layui遇到的坑

Posted adust

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了pjax+layui遇到的坑相关的知识,希望对你有一定的参考价值。

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

以上是关于pjax+layui遇到的坑的主要内容,如果未能解决你的问题,请参考以下文章

如何用ffmpeg截取视频片段&截取时间不准确的坑

关于layer的坑

jquery pjax 用法总结

pjax简单实例

layui之日期和时间组件

pjax学习