前端技术 手机教程
程序开发 平面动画
系统软件 运营推广
CMS教程 在线手册
资源下载 网络安全
精准搜索请尝试:精确搜索

动态添加的input无法触发datepicker/datetimepicker的解决办法

2020-11-17 15:21:56 来源:原创 作者:寂静的神经

示例代码:


<input type="text" class="form-control form-control-sm form_datetime" id="emigrant_date" name="emigrant_date" autocomplete="off">

datepicker/datetimepicker的默认触发方式:


$(".form_datetime" ).datepicker();

但是在该应用中,我需要动态创建一些input,


$("#add").on("click",function(){
var num = $("#educational_background_number").val();
var htm='<tr>'
   +'<td><input type="text" class="form-control form-control-sm form_datetime" id="emigrant_date" name="emigrant_date" autocomplete="off"></td>'
   +'<td><input type="text" class="form-control form-control-sm form_datetime" id="emigrant_date" name="emigrant_date" autocomplete="off"></td>'
   +'<td><input type="text" class="form-control form-control-sm" id="emigrant_date" name="emigrant_date" autocomplete="off"></td>'
   +'<td><input type="text" class="form-control form-control-sm" id="emigrant_date" name="emigrant_date" autocomplete="off"></td>'
   +'<td><a href="javascript:;" class="btn btn-default btn-sm" onclick="remove(this)">delete</a></td>'
   +'</tr>';
$("#educational_background_table tbody").append(htm);
})

结果发现动态创建的input使用默认的触发方式无效,无法弹出时间或日期选择框,解决是将默认的触发代码换成下面的代码:


$('body').on('focus',".form_datetime", function(){
   $(this).datepicker();
});​

如果上面的代码无效,那么就把body换成document即可:


$('document').on('focus',".form_datetime", function(){
   $(this).datepicker();
});​
分享到:
本文关键词:datepicker input 动态 datetimepick

相关文章

零五科技,分享IT知识,国内顶级IT知识门户网站。

Copyright (C) www.02405.com, All Rights Reserved.

零五科技 版权所有 辽ICP备13002105号-1