How can I get jquery datepicker to not working cloned rows

Question

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. Here's the Fiddle link: http://jsfiddle.net/d4oc7L8p/61/ Any advice would be appreciated.

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

If you add items in dom dynamically, you have to initialize datepicker on it:

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

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.

Also, you need to move event delegation code after - when the rows are cloned successfully on the page.

In order to use datePicker on the input having same Class you need to removeClass from the input and then render the datePicker.

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