pjax+layui遇到的坑(代码片段)

adust adust     2023-01-03     177

关键词:

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

开发中遇到的坑(代码片段)

在将float和double类型的数据转成 BigDecimal是应该先转成字符串newBigDecimal(String.valueOf(a)) 查看详情

gitlab遇到的坑(代码片段)

Jobforpostfix.servicefailedbecausethecontrolprocessexitedwitherror[[email protected]~]$sudosystemctlstatuspostfix●postfix.service-PostfixMailTransportAgentLoaded:loaded(/usr/lib/systemd/system/po 查看详情

jquery遇到的坑(代码片段)

一jquery遇到的坑1.1问题描述1.文件的写法:<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="Generator"content="EditPlus®& 查看详情

litepal遇到的坑(代码片段)

LitePal遇到的坑1、1、<meta-dataandroid:name="com.google.android.actions"android:resource="@xml/litepal"/>因为litepal.xml在assests文件里,不在res/xml里所以提示找不到@xml/litepal删掉 查看详情

litepal遇到的坑(代码片段)

LitePal遇到的坑1、1、<meta-dataandroid:name="com.google.android.actions"android:resource="@xml/litepal"/>因为litepal.xml在assests文件里,不在res/xml里所以提示找不到@xml/litepal删掉 查看详情

git遇到的坑(代码片段)

ssh出错 gitlab服务器添加完公钥之后,ssh服务器然后报了这个错误sign_and_send_pubkey:signingfailed:agentrefusedoperation执行以下命令eval"$(ssh-agent-s)"ssh-add解决 查看详情

kafka安装使用和遇到的坑(代码片段)

下载安装参考:https://segmentfault.com/a/1190000012730949?https://kafka.apache.org/quickstart关闭服务关闭zookeeperbin/zookeeper-server-stop.sh关闭kafkabin/kafka-server-stop.sh遇到的坑问题1[2018-04-0811:20:32,999]WARNSessi 查看详情

supervisor遇到的坑(代码片段)

今天在给服务器安装supervisor的时候遇到了一些坑,花了好长时间才跳过去!首先,supervisor的被监控进程必须是前台运行的,所以nohub和&的程序是不能被监控的;不然就会出现如下情况:2018-10-1823:29:14,364WARNreceivedSIGTERMindicating... 查看详情

consul遇到的坑(代码片段)

均衡负载时调用的地址spring.cloud.consul.discovery.service-name=         当A服务调用B服务时,可以转发到注册中心进行转发调用,应该使用这个地址,这一点和eureka不同,需要注意 引入spring-boot-starte... 查看详情

retrofit开发中遇到的坑(代码片段)

持续更新中1、使用@FormUrlEncoded的话,服务端需要使用Request.Form,如果不使用@FormUrlEncoded本地需要由@FieldMapMap<String,Object>map改成@QueryMapMap<String,Object>map,服务端改为使用Request.QueryString.   2、java.i 查看详情

在pypiserver部署网站遇到的坑(代码片段)

1.python3.7SSL的问题:从python2.7+django1.1.16升级到python3.7+django2.0后,试验能不能打开pypi-server的时候,遇到了下面这个问题 SSLCertVerificationError:[SSL:CERTIFICATE_VERIFY_FAILED]certificateverifyfailed:unabletogetlocalis 查看详情

centos7部署gitlab遇到的坑(代码片段)

####################################################################################~~~~填坑之路-开始~~~~~~~~问题一:安装GitLab出现ruby_block[supervise_redis_sleep]actionrun参考地址:https://www.cnblogs.com/springwind20 查看详情

docker简单使用和遇到的坑(代码片段)

安装环境:alios7.2 安装:1安装源#yuminstallepel-release–y#yumcleanall#yumlist2:安装docker#yuminstalldocker-io–y#systemctlstartdocker3:检查docker#dockerinfo4启停查看#systemctlstartdocker#运行Docker守护进程#systemctlstopdo 查看详情

constractlayout遇到的坑(代码片段)

总结下ConstraintLayout的使用:1.位置约束因为ConstraintLayout采用约束的方式控制控件的位置,所以至少要保证水平和垂直方向都至少有一个约束才能确定控件的位置。例如让TextView的顶部和界面顶部对齐,左部和界面左部... 查看详情

我在elasticsearch遇到的坑(代码片段)

安装没什么问题,windows安装java环境,下载elastic安装包,chorm安装elastic-head插件1.PHP调用时curl_setopt_array():Unabletocreatetemporaryfile一开始以为是Yii框架的问题,然后没有用框架测试还是一样的问题。原来是php对临时文件没有写权限,... 查看详情

使用逆向工程遇到的坑(代码片段)

1,前言 先说下逆向工程是干嘛的,他就是用来自动生成JAVAPOJO类,并同时生成Mapper.xml和Mapper接口的东东。2,使用方法 1)由于建立的是maven工程,所以先在pom.xml文件中导入jar包,如图: 2)根据mybatisgenerator官方文档... 查看详情

记录一下在学oracle中遇到的坑(个人记录向)(代码片段)

记录一下在学oracle中遇到的坑问题打不开OEM–>OC4JConfigurationissue.xxxnotfound–>查方法–>emctlstartdbconsole–>无法打开–>emca-configdbcontroldb-reposcreate–>然后发生错误重装之后输入emctlstartdbconsole;本来没安装客户端的,报错Env... 查看详情

android之swiperefreshlayout嵌套recyclerview遇到的坑(代码片段)

1、需求RecyclerView多布局里面加入SwipeRefreshLayout实现下拉刷新2、关键代码<androidx.swiperefreshlayout.widget.SwipeRefreshLayoutandroid:id="@+id/mainRefresh"android:layout_android:layout_app:layout_constraintBottom_toB 查看详情