layui框架input绑定日期选择器时点击事件触发问题

layui框架input绑定日期选择器时点击事件触发问题。

问题描述：采用layui框架写了一个项目，其中某form表单用到了日期选择器。其他表单因为是单独一个日期选择器故而没有出现问题，唯独其中一个页面的两个input框绑定了两次日期选择器，故而造成了点击input框内无反应，点击边框才能触发日期选择器的问题。

layui框架input绑定日期选择器

刚开始出现问题的时候搜索了官方的文档，但是采用click事件单独render时问题依然存在。最初代码如下：

  1. $("#start_time").on("click",function(){
  2.             laydate.render({
  3.                 elem:'#start_time',format:'yyyy-MM-dd',closeStop:'#start_time',value:this.value
  4.             })
  5.         })
  7.         $("#end_time").on("click",function(){
  8.             laydate.render({
  9.                 elem:'#end_time',format:'yyyy-MM-dd',closeStop:'#end_time',value:this.value
  10.             })
  11.         })

最终解决方案如下。

1、分别给两个input框增加一个date_select的class属性。

2、添加如下JS代码：

  1. //阻止两个日期选择器的冒泡事件
  2.         layui.use('laydate',function(){
  3.             var laydate = layui.laydate;
  4.             lay('.date_select').each(function(){
  5.                 laydate.render({
  6.                     elem: this,
  7.                     trigger: 'click'
  8.                 })
  9.             })
  10.         })

记录下这个过程，官方文档很重要。当你不知道原因出在什么位置的时候，就看官方文档。

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！