[英]How can I get jquery datepicker to not working cloned rows
I have looked over many pages helping with the jquery
datepicker not being functional on cloned rows, but I can't seem to translate any of the suggestions I found to my particular case.我查看了许多帮助jquery
日期选择器在克隆行上不起作用的页面,但我似乎无法将我发现的任何建议翻译成我的特定案例。 Here's the Fiddle link: http://jsfiddle.net/d4oc7L8p/61/ Any advice would be appreciated.这是 Fiddle 链接: http://jsfiddle.net/d4oc7L8p/61/如有任何建议,我们将不胜感激。
// datepicker
$('body').on('focus', ".datepick", function() {
$(this).datepicker({
buttonImage: "${ctx }/resources/plugins/jquery-ui-1.12.1/images/calendar.png",
});
})
$("#btn_add").click(function(e) {
e.preventDefault();
var $item = $("#sample_item_wrap .tr_item.sample").clone().removeClass('sample');
$item.find("input").val("");
$("#list_wrap").append($item);
})
If you add items in dom dynamically, you have to initialize datepicker on it:如果你在 dom 中动态添加项目,你必须在其上初始化 datepicker:
// datepicker
$('body').on('focus', ".datepick", function() {
$(this).datepicker({
buttonImage: "${ctx }/resources/plugins/jquery-ui-1.12.1/images/calendar.png",
});
})
$("#btn_add").click(function(e) {
e.preventDefault();
var $item = $("#sample_item_wrap .tr_item.sample").clone().removeClass('sample');
$item.find("input").val("");
$item.find("input.datepick").datepicker({
buttonImage: "${ctx }/resources/plugins/jquery-ui-1.12.1/images/calendar.png",
});// Here, add datepicker on dynamically added item
$("#list_wrap").append($item);
})
You need to use event Delegation on all dynamically cloned rows to be able to trigger UI jQuery datepicker
on all the newly added inputs
.您需要对所有动态克隆的行使用事件委托,以便能够在所有新添加的inputs
上触发 UI jQuery datepicker
。
Also, you need to move event delegation code
after - when the rows are cloned successfully on the page.此外,您需要在页面上成功克隆行之后移动事件委托code
。
In order to use datePicker
on the input having same Class you need to removeClass
from the input and then render
the datePicker.为了在具有相同 Class 的输入上使用datePicker
,您需要从输入中移除类,然后render
removeClass
。
// datepicker
$(document).on('focus', ".datepick", function() {
$(this).removeClass('hasDatepicker').datepicker(); //remove datePicker
//add datepicker to this
$(this).datepicker({
//buttonImage: "${ctx}/resources/plugins/jquery-ui-1.12.1/images/calendar.png",
});
})
Live Working Demo:现场工作演示:
//Clone rows $("#btn_add").click(function(e) { e.preventDefault(); var $item = $("#sample_item_wrap.tr_item.sample").clone().removeClass('sample'); $item.find("input").val(""); $("#list_wrap").append($item); }) // datepicker $(document).on('focus', ".datepick", function() { $(this).removeClass('hasDatepicker').datepicker(); //remove datePicker //add datepicker to this $(this).datepicker({ //buttonImage: "${ctx}/resources/plugins/jquery-ui-1.12.1/images/calendar.png", }); })
.tbl_form { border-top: 1px solid #B9B9B9; border-left: 1px solid #B9B9B9; font-size: 13px; }.tbl_form tbody th { background: #E5E5E5; border-right: 1px solid #B9B9B9; border-bottom: 1px solid #B9B9B9; font-weight: normal; }.tbl_form tbody td { background: #fff; border-right: 1px solid #B9B9B9; border-bottom: 1px solid #B9B9B9; padding: 3px; }.tbl_form tbody td input[type="text"] { width: 100%; height: 100%; background: #fff; border: 1px solid #E2E2E2; padding: 0 5px; border-radius: 3px; }.tbl_form tbody td input[type="text"]:disabled { height: 100%; background: #F8F8F8; border: 1px solid #E2E2E2; padding: 0 5px; border-radius: 3px; }.tbl_form tbody td input[type="date"] { height: 100%; background: #fff; border: 1px solid #E2E2E2; padding: 0 5px; border-radius: 3px; }.d_flex { display: flex; }.d_flex span { padding: 0 10px; }.d_flex a { padding: 0 10px; }.d_flex input[type="button"] { background: #333; padding: 0 5px; border-radius: 3px; color: #fff; margin-left: 5px; padding: 0 10px; }.d_flex label.file { position: relative; cursor: pointer; display: inline-block; vertical-align: middle; overflow: hidden; color: #fff; text-align: center; background: #333; border-radius: 3px; color: #fff; margin-left: 5px; width: 70px; }.d_flex label.file input { position: absolute; width: 0; height: 0; overflow: hidden; } /* 추가 버튼 */.btn_add_white { border: 1px solid #666; border-radius: 5px; background: #fff url(../images/sub/ico_add_black.png) no-repeat 10px 50%; padding: 5px 10px 5px 25px; font-size: 13px; color: #333; line-height: 14px; position: absolute; top: -3px; right: 0; }.btn_add_black { background: #666 url(../images/sub/ico_add_white.png) no-repeat 10px 50%; padding: 0 10px 0 25px; font-size: 13px; color: #fff; line-height: 35px; position: absolute; top: 0; right: 0; }
<script src="https//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <div class="detail-cont"> <h5>유지보수 위탁업체 개요</h5> <a id="btn_add" href="#" class="btn_add_black">유지보수 위탁업체 추가</a> <table class="tbl_form"> <caption class="Hidden">유지보수 위탁업체 개요</caption> <tbody> <tr> <th rowspan="2">위탁부문</th> <th rowspan="2">위탁업체명</th> <th rowspan="2">업체대표</th> <th rowspan="2">업체 위치</th> <th rowspan="2">위탁부문</th> <th rowspan="2">조직도</th> <th colspan="2">계약기간</th> </tr> <tr> <th>계약시작일</th> <th>계약종료일</th> </tr> </tbody> <tbody id="sample_item_wrap"> <tr class="tr_item sample"> <td> <div class="d_flex"> <input type="text" class="align_l" placeholder="위탁부문" maxlength="20"> </div> </td> <td> <div class="d_flex"> <input type="text" class="align_l" placeholder="위탁업체명" maxlength="20"> </div> </td> <td> <div class="d_flex"> <input type="text" class="align_l" placeholder="업체대표" maxlength="20"> </div> </td> <td> <div class="d_flex"> <input type="text" class="align_l" placeholder="업체 위치" maxlength="20"> </div> </td> <td> <div class="d_flex"> <input type="text" class="align_l" placeholder="위탁부문" maxlength="20"> </div> </td> <td> <div class="file_up"> <input type="text" class="w_100" placeholder="파일을 선택해주세요"> <label class="gray_btn">파일선택<input type="file"></label> </div> <ul class="file_list"> <li><a href="#" class="list_name">20200709_조직도.jpg</a> <a href="#" class="btn_del"><span>삭제</span></a></li> </ul> </td> <td> <input type="text" class="datepick" placeholder="날짜선택" style="width: 80px"> </td> <td> <input type="text" class="datepick" placeholder="날짜선택" style="width: 80px"> </td> </tr> </tbody> <tbody id="list_wrap"></tbody> </table> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.