最近写页面时需要用到,日期选择器,网上搜索了一些插件,最后使用了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. POJ:1833 按字典序找到下一个排列:

    http://poj.org/problem?id=1833 按照字典的顺序(a-z) (1-9),可以得出任意两个数字串的大小.比如“123”, 最小的是“123”(从小到大),最大的是“321”( ...

  2. 在SOUI中使用窗口自適應大小

    SOUI 2.5.0.3開始支持窗口大小自適應. 2.5.0.3以前,宿主窗口要適應顯示內容大小比較麻煩,因爲一般都是佈局內容適應宿主. SOUI 2.5.+開始支持線性佈局,線性佈局是借鑑的Andr ...

  3. Codeforces 938D. Buy a Ticket (最短路+建图)

    <题目链接> 题目大意: 有n座城市,每一个城市都有一个听演唱会的价格,这n座城市由m条无向边连接,每天变都有其对应的边权.现在要求出每个城市的人,看一场演唱会的最小价值(总共花费的价值= ...

  4. Spring Cloud微服务笔记(五)Feign

    Feign 一.Feign概述 Feign是一个声明式的Web Service客户端.在Spring Cloud 中使用Feign,可以做到 使用HTTP请求访问远程服务,就像调用本地方法一样,同时它 ...

  5. Python科学计算库

    Python科学计算库 一.numpy库和matplotlib库的学习 (1)numpy库介绍:科学计算包,支持N维数组运算.处理大型矩阵.成熟的广播函数库.矢量运算.线性代数.傅里叶变换.随机数生成 ...

  6. 我的 FPGA 学习历程(08)—— 实验:点亮单个数码管

    数码管是一种常见的用于显示的电子器件,根据数码管大致可以分为共阴极和共阳极两种,下图所示的是一个共阳极的数码管的电路图(摘自金沙滩工作室的 51 开发板电路图),我的 AX301 开发板与这张图的情况 ...

  7. 推荐多线程下载工具axel替代wget

    在爬数据的时候很多时候需要下载文件比如压缩文件,音频,视频,图片等等,这些文件通常有一个请求的url,这个时候使用request模块或者urllib模块都很慢,而且很不稳定,这个时候使用wget或者a ...

  8. jquery ajax中success与complete的执行顺序

    jquery ajax中success与complete的执行顺序 jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) ...

  9. JavaScript(九)

    内置对象 1.document document.referrer //获取上一个跳转页面的地址(需要服务器环境) 2.location window.location.href //获取或者重定ur ...

  10. [NodeJs Windows编译学习]

    https://blog.csdn.net/gesturexiaoxin/article/details/80162944