jQuery 날짜 선택기 복제

StackOverflow https://stackoverflow.com/questions/34790

  •  09-06-2019
  •  | 
  •  

문제

그만큼 datepicker 함수는 생성된 첫 번째 입력 상자에서만 작동합니다.

복제하여 날짜 선택기를 복제하려고 합니다. div 그 내용이 들어있습니다.

<a href="#" id="dupMe">click</a>
<div id="template">
  input-text <input type="text" value="text1" id="txt" />
  date time picker <input type="text" id="example" value="(add date)" />
</div>

날짜 선택기를 초기화하려면 jQuery UI 문서 내가 해야 할 일은 $('#example').datepicker(); 작동하지만 생성된 첫 번째 날짜 선택기에서만 작동합니다.

복제하는 코드 div 다음과 같습니다:

$("a#dupMe").click(function(event){
  event.preventDefault();
  i++;
  var a = $("#template")
            .clone(true)
            .insertBefore("#template")
            .hide()
            .fadeIn(1000);
  a.find("input#txt").attr('value', i);
  a.find("input#example").datepicker();
});

가장 이상한 점은 그 위에 document.ready 나는 가지고있다:

$('#template #example').datepicker();
$("#template #txt").click(function() { alert($(this).val()); });

그리고 내가 #txt 항상 작동합니다.

도움이 되었습니까?

해결책

일반적인 클래스 이름도 사용하는 것이 좋습니다.그러나 어떤 이유로든 이에 반대한다면 템플릿의 모든 텍스트 상자에 대한 날짜 선택기를 만드는 함수를 작성할 수도 있습니다. div (각 복제 후에 호출됩니다).다음과 같은 것 :

function makeDatePickers() {
  $("#template input[type=text]").datepicker();
}

다른 팁

대신 CSS 클래스를 사용합니다.

<input type="text" id="BeginDate" class="calendar" />
<input type="text" id="EndDate" class="calendar" />

그러면 당신의 document.ready 기능:

$('.calendar').datepicker();

여러 달력 필드에 그런 식으로 사용하면 나에게 적합합니다.

나는 몇 시간의 테스트 후에 해결책을 찾은 매우 유사한 문제가 있었습니다.HTML 코드 블록을 복사하여 이미 jQuery 날짜 선택 달력이 포함된 섹션 뒤에 삽입하고 있었습니다.처음에 내가 깨닫지 못한 것은 jQuery UI 캘린더가 실행될 때 요소의 클래스를 수정한다는 것입니다. .datepicker() 기능.결과적으로 코드를 복사하고 해당 새 섹션에 대한 캘린더의 새 인스턴스를 시작하려고 하면 CSS에 따라 이미 하나가 있기 때문에 실패합니다.사용하려고 하면 .datepicker('destroy') 실제로 존재하지 않기 때문에 이 고스트 인스턴스를 삭제하는 데 실패합니다.HTML에서 날짜 선택기 요소의 클래스를 재설정한 다음 해당 요소에 날짜 선택기를 추가하여 문제를 해결했습니다.

아래는 내가 사용했던 코드입니다.이를 통해 다른 사람의 시간이 절약되길 바랍니다...

$('#addaddress').click(function() {
  var count = $('.address_template').size();
  var html = $('.address_template').eq(0).html();
  $('#addaddress').before('<div class="address_template">' + html + '</div>');
  $('.address_template H1').eq(count).html("Previous Address " + count);
  $('.address_date').eq(count).attr("class","address_date");
  $('.address_date').eq(count).attr("id","movein" + count);
  $("#movein" + count).datepicker();
});

복제 중인 HTML에는 여러 개의 날짜 선택기 입력이 있습니다.

Ryan Stemkoski의 답변과 Alex King의 의견을 사용하여 다음 솔루션을 생각해냈습니다.

var clonedObject = this.el.find('.jLo:last-child')
clonedObject.find('input.ui-datepicker').each(function(index, element) {
    $(element).removeClass('hasDatepicker');
    $(element).datepicker();
});
clonedObject.appendTo('.jLo');

고마워요.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top