标签：加载 jquer off inline class 事件绑定 多次 提示 遇到
观点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"></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"></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或者性能影响，毕竟不是前端程序员，对于这些不熟，望见谅，其他同学也可以发表自己建议。
标签：加载 jquer off inline class 事件绑定 多次 提示 遇到
原文地址：https://www.cnblogs.com/aDust/p/9714955.html
