如何使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);
})

- jonh

---

请通过单击“[<>]”片段编辑器在此处提供[mcvr]。 您的CSS非常庞大，与问题无关且不适合在此处。 - mplungjan

http://jsfiddle.net/d4oc7L8p/61/ 删除css！ - jonh

我已经看过了。使用堆栈片段将其复制到SO，但仅使用相关代码。 - mplungjan

Answer 1

如果您在DOM中动态添加项目，则必须在其上初始化日期选择器：

// 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);
})

- Dani

Answer 2

您需要在所有动态克隆的行上使用事件委托，以便能够触发所有新添加的inputs上的UI jQuery datepicker。

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

为了在具有相同类的输入上使用datePicker，您需要从输入中removeClass，然后render 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",
  });
})

实时演示：

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

- Always Helping