我怎样才能让jquery datepicker无法正常工作的克隆行

问题描述

我查看了许多页面，这些页面有助于jquery datepicker在克隆行上不起作用，但是我似乎无法将发现的任何建议转化为我的特殊情况。这是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);
})

解决方法

如果您动态添加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);
})

,

您需要在所有动态克隆的行上使用event Delegation，才能在所有新添加的datepicker上触发UI jQuery inputs。

此外，当行成功克隆到页面上时，您需要在-之后移动事件委托code。

要在具有相同Class的输入上使用datePicker，您需要先从输入removeClass然后是render datePicker。

// datepicker
$(document).on('focus',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',});
})

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