最近写页面时需要用到,日期选择器,网上搜索了一些插件,最后使用了flatpickr.js。我是从npm 上拉下的依赖  npm install flatpickr --save

随后在页面中引入css,js文件,引入css文件时,可以大致留意一下,选择自己喜欢的色调,

引入js文件:

html代码:

界面效果:

在使用的过程中我遇到了一些问题,当我动态创建一个input标签时,选择器没效果了,

原因是,当把新创建的元素添加到页面时,插件还未加载完毕,所以就不起作用

解决的办法是,自己手动初始化插件,具体代码如下:

当然了写完这句代码还是不起作用,你还需要加一句代码,新创建的元素也需要初始化啊:

这样,bug就完美解决了,希望能帮到遇到同样问题的你!

使用jquery日期选择器flatpickr.js,使用js动态创建input元素时插件失效的更多相关文章

  1. JQuery日期选择器插件date-input

    JQuery日期选择器插件之date-input 官方网站:http://jonathanleighton.com/projects/date-input/ 下载地址: http://github.c ...

  2. JS动态引入js、CSS动态创建script/link/style标签

    一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.create ...

  3. jquery 动态创建的元素,绑定事件无效之解决方法

    今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...

  4. jQuery动态创建html元素的常用方法汇总

    在使用jQuery进行WEB程序设计的时候非常有用.分享给大家供大家参考.具体方法如下: 一般来说,可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到 ...

  5. 用jQuery绑定事件到动态创建的元素上

    jQuery最常用的一个功能就是对DOM的操作,与之相关的比如对事件的绑定和Ajax动态内容加载.当我们绑定事件到Ajax load回来的内容上或其他动态创建的元素上时会发现事件没响应,和你预想的结果 ...

  6. jQuery 绑定事件到动态创建的元素上

    在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay ...

  7. jquery动态创建页面元素

    jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...

  8. 基于jQuery动态创建html元素

    在做web前端开发的时候,经常遇到一些数据多少或则类型不能在运行之前就确定下来的情况,此时,数据的展示,就要借助于动态创建html元素来展示了. 常见的动态创建HTML元素的方式,有如下几种,大体都差 ...

  9. JS提交表单页面不跳转、JS下载、动态创建from

    JS下载 function downloadFile(id) {     var url =  "<%=request.getContextPath()%>/cer/downlo ...

随机推荐

  1. js过滤html标签

    function deleteHtmlTag(str){ str = str.replace(/<[^>]+>|&[^>]+;/g,"").trim ...

  2. Can not find the tag library descriptor for "http://java.sun.com/jsp/jst1/core

    主要是缺少两个包: jstl.jar下载地址: http://repo2.maven.org/maven2/javax/servlet/jstl/ standard.jar下载地址: http://r ...

  3. Docker 学习4 Docker容器虚拟化网络概述

    一.docker 虚拟化网络概述 1.OVS: OpenVSwitch,不仅能模拟二层网络,还能模拟三层网络,或者VLAN,VXLAN,流控 SDN软件定义网络技术等. 2.overlay netwo ...

  4. UOJ#465. 【HNOI2019】校园旅行 其他

    原文链接www.cnblogs.com/zhouzhendong/p/UOJ465.html 前言 tmd并查集写挂,调到自闭. cly和我写挂了同一个地方. 一下救了两个人感觉挺开心. 题解 首先直 ...

  5. spring boot 项目打成war包部署到服务器

    这是spring boot学习的第二篇了,在上一篇已经整合了spring boot项目了,如果还有小伙伴没有看得可以先去看第一篇 基础整合spring boot项目 到这里的小伙伴应该都是会整合基本的 ...

  6. python书籍推荐:Python Cookbook第三版中文

    所属网站分类: 资源下载 > python电子书 作者:熊猫烧香 链接:http://www.pythonheidong.com/blog/article/44/ 来源:python黑洞网 内容 ...

  7. Set接口下的集合

    一.集合(定义字段的时候统一使用包装类) 1.集合大类分为List.Set.Map三种,其中,List集合是有序可重复的,并且可以使用普通for循环.增强for循环.正向迭代器.双向迭代器:Set集合 ...

  8. KaliLinuxNetHunter教程刷入第三方Recovery与开始刷机

    KaliLinuxNetHunter教程刷入第三方Recovery与开始刷机 2.刷入第三方Recovery(即TWRP) TWRP(TeamWin Recovery Project)是一款XDA大神 ...

  9. Unity Rain Ai 插件基本使用(二)

    前言 在前面的教程中我们已经基本实现了路径导航和障碍物规避. 但是这样我们并没有让我们的角色学会思考,他只是机械的去完成一些步骤,这并不能体现Rain插件的智能. 一个角色他应该有多个不同的状态,待机 ...

  10. Xmanager6 下载地址

    Xmanager-6标准版下载地址 http://xiazai.xshellcn.com/trial/Xmanager-6.0.0080_yy.exe Xmanager-6企业版下载地址 http:/ ...