jQuery UI의 DatePicker가 왜 동적 DOM으로 깨지는 이유는 무엇입니까?

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

  •  21-08-2019
  •  | 
  •  

문제

여기서 동적 DOM과 함께 일하고 있으며 특정 클래스 이름을 가진 모든 입력에 jQuery UI DatePicker를 불렀습니다. .date

그것은 첫 번째, 정적, 구성과 잘 작동하지만 복제 할 때 이벤트 처리기는 이동하고 싶지 않은 것 같습니다. Firebug 오류가 발생합니다.

Inst는 정의되지 않았습니다

나는 jQuery의 새로운 것을 조사하려고 노력했다 live() 기능이지만 둘을 결합 할 수 없었습니다. 어떤 아이디어?

도움이 되었습니까?

해결책

아, 얻었다. HTML을 DOM에 추가 한 직후 DatePicker가 팝업하고 싶은 모든 입력에서 이것을 실행합니다. DatePicker는 첨부 된 요소에 클래스를 추가하므로 기존 입력을 필터링하여 새 입력에만 적용 할 수 있습니다.

$('.date').not('.hasDatePicker').datepicker();

며칠 동안 인터넷 검색을하고 아무것도 찾지 못했을 때 이것이 사람들이 도움이되기를 바랍니다.

또한 확인하는 것이 더 빨라질 것임을 주목해야합니다. input.date 새로운 생성 된 HTML에서는 전체 페이지가 아닌 컨텍스트로 설정하여 시간을 절약 할 수 있으므로보다 효율적인 작업이기 때문에 시간을 절약 할 수 있습니다.

다른 팁

비슷한 문제가 있었는데 페이지에 여러 테이블이 있었고 각각 다수의 DatePickers가 있었으며 버튼 "Addline"클릭에 동적 HTML 및 DatePicker가있는 테이블 행을 추가했습니다.

많은 검색 후 입력 날짜 필드가 "ID"가 없다는 것을 깨달았습니다. 

<input type="text" class="datepicker" name="mDate1" value="" size=8 >

jQuery는 모든 날짜 필드 값을 페이지에 정의 된 첫 번째 날짜 필드를 가리키고 있었고, 캘린더는 모든 날짜 필드에 팝업되지만 첫 번째 날짜 필드의 값은 변경 될 것이며, 이와 같이 HTML을 변경했습니다. 

<input type="text" class="datepicker" id="Date1" name="mDate1" value="" size=8 >

"ID"를 추가하고 작동하기 시작하여 동적 날짜 필드를 위해 ID를 다음과 같이 변경합니다.

var allColumns = $("#"+$tableId+" tr:last td"); 
        $(allColumns).each(function (i,val) {
            if($(val).find(":input").hasClass("datepicker")){
                $(val).find(":input").attr("id",newId+$(val).find(":input").attr("id"));
            }
        });

'라이브'이벤트를 사용하여 Dynamic Dom과 함께 작동하도록해야합니다. 따라서 DatePicker 입력에 대한 클래스가 '날짜 입력'인 경우 다음 코드가 작동합니다.

$(document).ready(function() {
    $('.date-input').live('click', function() {
    $(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
        });
});

이것은 조금 늦었을 수도 있지만, 위의 모든 제안은 나에게 효과가 없었습니다. 나는 이것을위한 쉬운 해결책을 생각해 냈습니다.

첫째, 문제를 일으키는 원인 : jQuery는 datePicker를 요소 ID에 할당합니다. 복제 요소 인 경우 동일한 ID도 복제 될 수 있습니다. 어떤 jQuery가 마음에 들지 않습니다. 클릭 한 입력 필드에 관계없이 NULL 참조 오류를 수신하거나 첫 번째 입력 필드에 할당 된 날짜로 끝날 수 있습니다.

해결책:

1) DATED DATEDPICKER 2) 모든 입력 필드에 새 고유 ID를 지정 3) 각 입력에 대해 datePicker를 지정

입력이 이와 같은 것인지 확인하십시오

<input type="text" name="ndate[]" id="date1" class="n1datepicker">

복제하기 전에 DatePicker를 파괴하십시오

$('.n1datepicker').datepicker('destroy');

복제 후이 라인도 추가하십시오

var i = 0;
$('.n1datepicker').each(function () {
    $(this).attr("id",'date' + i).datepicker();
    i++;
});

그리고 마법이 일어납니다

사용 

$j(id or class).removeClass('hasDatepicker').datepicker();

작동합니다

JQuery Selectors 사용 :

$(".mydatepicker:not(.hasDatepicker)").datepicker()

페이지의 jQuery-UI 라이브러리의 여러 인스턴스로 인해이 오류가 발생합니다. 중복 인스턴스를 제거하면 내 사례가 작동합니다

입력과 동일한 ID 속성을 갖는 TD 포함 요소를 갖는 것과 같은 증상이 동일한 증상을 경험했습니다.

 <td id="fld_xyz"><input id="fld_xyz" class="date" /></td>

어쨌든 이것이 이상적이지 않다는 것을 알고 있지만 DatePicker 구성 요소가 ID의 독창성에 의존하는 것 같습니다.

나는이 문제가 있었다. 내 상황은 DatePicker와의 입력과 동일한 ID를 가진 다른 요소를 가지고 있다는 것입니다.

오늘 나는 같은 문제에 직면했다 ... 나는 DateTimePicker 내 응용 프로그램에 플러그인.
또한 jQuery의 기본 날짜 피커도 사용합니다. 문서 준비로 둘 다 호출 할 때마다 오류가 발생하고 있습니다. inst is undefined.

    $(document).ready(function(){
        $(".datepickerCustom").datetimepicker();
        $(".datepicker").datepicker();
        $("#MainForm").validationEngine('attach');
        ....
    });

그래서 아래와 같이 문서가 준비되기 전에 코드를 호출하도록 코드를 변경했습니다.

    $(".datepickerCustom").datetimepicker();
    $(".datepicker").datepicker();
    $(document).ready(function(){
        $("#MainForm").validationEngine('attach');
        ....
    });

이제 모든 것이 잘 작동합니다. 아무 문제 없습니다.

첫 번째 호출 후 데이터 피커가 작동하지 않는 것과 비슷한 문제가있었습니다. 여기에서 내 문제에 대한 답을 찾았습니다.

http://www.stemkoski.com/problem-with-jquery-ui-datepicker-dynamic-dom/

나는 템플릿에서 동적으로 섹션을 복제했으며 DatePicker가 다음에 추가하는 클래스를 포함하여 실수로 다음을 포함했습니다. 

hasDatepicker

템플릿을 복제 한 후 첫 데이트 피커 전화를 배치했습니다. 그런 다음 클론의 각 인스턴스 후 DatePicker 호출을 추가했습니다.

$(source).clone().appendTo(destination).find(".datepicker").datepicker();

여기에서 많은 답변을 시도한 후, 이것은 저에게 효과가 있었고 첫 번째 클릭/포커스에서 보여지는 것입니다.

function vincularDatePickers() {
    $('.mostrar_calendario').live('click', function () {
        $(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
    });
}

이것은 당신의 입력에 클래스 'mostrar_calendario'가 있어야합니다.

Live는 jQuery 1.3+ 용입니다. 최신 버전의 경우 "ON"에 적응해야합니다.

차이점에 대한 자세한 내용은 여기를 참조하십시오 http://api.jquery.com/live/

여전히 작동하지 않으면 복제 된 ID 때문입니다. 다음과 같이 DatePicker를 완전히 제거 할 수 있습니다. 

$(selector).removeClass('hasDatepicker').removeAttr('id').datepicker();
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top