我怎樣才能讓 jquery 日期選擇器不工作克隆行

Question

我查看了許多幫助jquery日期選擇器在克隆行上不起作用的頁面，但我似乎無法將我發現的任何建議翻譯成我的特定案例。 這是 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);
})

Answer 1

如果你在 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);
})

Answer 2

您需要對所有動態克隆的行使用事件委托，以便能夠在所有新添加的inputs上觸發 UI jQuery datepicker 。

此外，您需要在頁面上成功克隆行之后移動事件委托code 。

為了在具有相同 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",
  });
})

現場工作演示：

 //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>