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

  • 相关阅读:
    LibreOJ2095
    Codeforces
    LibreOJ2241
    LibreOJ2044
    LibreOJ2043
    LibreOJ2045
    LibreOJ2042
    LibreOJ2097
    洛谷P4175
    POJ2888
  • 原文地址:https://www.cnblogs.com/aDust/p/9714955.html
Copyright © 2011-2022 走看看