使用jquery日期选择器flatpickr.js,使用js动态创建input元素时插件失效
最近写页面时需要用到,日期选择器,网上搜索了一些插件,最后使用了flatpickr.js。我是从npm 上拉下的依赖 npm install flatpickr --save
随后在页面中引入css,js文件,引入css文件时,可以大致留意一下,选择自己喜欢的色调,

引入js文件:

html代码:

界面效果:

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

原因是,当把新创建的元素添加到页面时,插件还未加载完毕,所以就不起作用
解决的办法是,自己手动初始化插件,具体代码如下:

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

这样,bug就完美解决了,希望能帮到遇到同样问题的你!
使用jquery日期选择器flatpickr.js,使用js动态创建input元素时插件失效的更多相关文章
- JQuery日期选择器插件date-input
JQuery日期选择器插件之date-input 官方网站:http://jonathanleighton.com/projects/date-input/ 下载地址: http://github.c ...
- JS动态引入js、CSS动态创建script/link/style标签
一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.create ...
- jquery 动态创建的元素,绑定事件无效之解决方法
今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...
- jQuery动态创建html元素的常用方法汇总
在使用jQuery进行WEB程序设计的时候非常有用.分享给大家供大家参考.具体方法如下: 一般来说,可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到 ...
- 用jQuery绑定事件到动态创建的元素上
jQuery最常用的一个功能就是对DOM的操作,与之相关的比如对事件的绑定和Ajax动态内容加载.当我们绑定事件到Ajax load回来的内容上或其他动态创建的元素上时会发现事件没响应,和你预想的结果 ...
- jQuery 绑定事件到动态创建的元素上
在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay ...
- jquery动态创建页面元素
jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...
- 基于jQuery动态创建html元素
在做web前端开发的时候,经常遇到一些数据多少或则类型不能在运行之前就确定下来的情况,此时,数据的展示,就要借助于动态创建html元素来展示了. 常见的动态创建HTML元素的方式,有如下几种,大体都差 ...
- JS提交表单页面不跳转、JS下载、动态创建from
JS下载 function downloadFile(id) { var url = "<%=request.getContextPath()%>/cer/downlo ...
随机推荐
- Netty实现心跳机制
netty心跳机制示例,使用Netty实现心跳机制,使用netty4,IdleStateHandler 实现.Netty心跳机制,netty心跳检测,netty,心跳 本文假设你已经了解了Netty的 ...
- Anki 2.0 用户手册
Anki 2.0 用户手册 目录 Anki 2.0 用户手册 视频介绍 卡片和模板 Javascript Anki 2.0 用户手册 视频介绍 共享牌组和基础复习技巧 调换卡片正反面 卡片样式设计 亲 ...
- 分布式缓存技术之Redis_Redis集群连接及底层源码分析
目录 1. Jedis 单点连接 2. Jedis 基于sentinel连接 基本使用 源码分析 本次源码分析基于: jedis-3.0.1 1. Jedis 单点连接 当是单点服务时,Java ...
- 构建npm包出现"找不到node_modules"的问题
目录结构 解决方案 先在微信开发者工具->详细->使用npm 1.cd到\WeChatProject\miniprogram文件夹 2.npm init 3.npm install 4.n ...
- Linux入门级
Linux及其发行版 我安装过的Linux发行版centOS.Kali.Ubuntu.rebHat. Reference Linux发行版排行榜 开源协议 Reference 开源协议 场景 说明一个 ...
- SpringCloud使用Sofa-lookout监控(基于Eureka)
本文介绍SpringCloud使用Sofa-lookout,基于Eureka服务发现. 1.前景 本文属于是前几篇文章的后续,其实一开始感觉这个没有什么必要写的,但是最近一个朋友问我关于这个的问题,所 ...
- SpringCloud教程 | 第八篇: 消息总线(Spring Cloud Bus)
一.安装rabbitmq 二.pom父文件 <?xml version="1.0" encoding="UTF-8"?> <project x ...
- Spark环境搭建(五)-----------Spark生态圈概述与Hadoop对比
Spark:快速的通用的分布式计算框架 概述和特点: 1) Speed,(开发和执行)速度快.基于内存的计算:DAG(有向无环图)的计算引擎:基于线程模型: 2)Easy of use,易用 . 多语 ...
- 逛公园 [NOIP2017 D1T3] [记忆化搜索]
Description 策策同学特别喜欢逛公园.公园可以看成一张N个点M条边构成的有向图,且没有自环和重边.其中1号点是公园的入口,N号点是公园的出口,每条边有一个非负权值,代表策策经过这条边所要花的 ...
- CMD 中常见命令
引自百度经验:https://jingyan.baidu.com/article/67508eb41d44a09cca1ce4f1.html ipConfig:查询ip ping:查询连接速度: pi ...