JavaScript/jQuery + datetime picker : 동적으로 추가 된 입력에 fire datetime picker가 표시되지 않습니다.

동적으로 추가 된 입력 블록 (테이블 셀 내에서)이 datetime 선택기를 실행하지 않는 이유를 파악하려고합니다. 이 문제를 보여주는 개념 코드 블록을 제공했습니다. 이 코드를 그대로 실행하면 기본 입력 태그 (id : dti1)가 완벽하게 작동하고 datetime picker가 팝업되고 사용자가 날짜와 시간을 선택할 수 있습니다. 그러나 "다른 항목 추가"를 클릭하면 dtpick 클래스가 올바르게 연결된 경우에도 datetime 선택기가 새 입력 요소에 팝업되지 않습니다. 내 가정은 datetime 선택기가 페이지로드시 각 dtpick 클래스 요소와 연결되므로 datetime 선택기가 작동하지 않는 이유입니다. 동적으로 행을 추가 할 때 강제로 수행 할 수있는 방법이 있습니까?JavaScript/jQuery + datetime picker : 동적으로 추가 된 입력에 fire datetime picker가 표시되지 않습니다.

<html> 
<head> 
<!-- includes: jquery, jquery_ui_datepicker, timepicker-- references removed here--> 
<script> 
    $(document).ready(function(){ 
    $('.dtpick').datetime({ 
    userLang : 'en', 
    americanMode: true}); 
    }); 
    function addItem() 
    { 
    var t = document.getElementById('myTable'); 
     var row = t.insertRow(-1); 
     var c1 = row.insertCell(0); 

     var c1content=document.createElement("input"); 
     c1content.setAttribute("type","text"); 
     c1content.setAttribute("name","dtnew"); 
     c1content.setAttribute("id","dtinew"); 
     c1content.setAttribute("class","dtpick"); 
     c1content.setAttribute("value","2011-08-20 01:00:00"); 

     c1.appendChild(c1content); 
    } 
</script> 
</head> 
<body> 
<table id="myTable"> 
<tr> 
    <td><b>Row Header:</b></td> 
</tr> 
<tr> 
    <td><input type="text" name="dt1" id="dti1" class="dtpick" value="2011-08-21 01:00:00"></td> 
</table><br> 
<a onclick="addItem()"> Add another</a> 
</body> 
</html>

어떤 도움이라도 대단히 감사합니다! 당신이 항목을 추가 한 후 데이비드

출처

2011-08-16 David B.

, 당신은 당신의 날짜 선택 위젯을 다시 초기화해야합니다. 즉, 다음과 같이 표시되어야합니다.

function addItem() 
{ 
    var t = document.getElementById('myTable'); 
    var row = t.insertRow(-1); 
    var c1 = row.insertCell(0); 

    var c1content=document.createElement("input"); 
    c1content.setAttribute("type","text"); 
    c1content.setAttribute("name","dtnew"); 
    c1content.setAttribute("id","dtinew"); 
    c1content.setAttribute("class","dtpick"); 
    c1content.setAttribute("value","2011-08-20 01:00:00"); 

    c1.appendChild(c1content); 

    $('.dtpick').datetime({ 
     userLang: 'en', 
     americanMode: true}); 
    }); 
}

출처

2011-08-16 22:45:14

우수함 - 완벽하게 작동했습니다. 후속 질문 - 내 실제 구현에서, 나는 실제로 만들고있는 각 입력에 대한 단위 이름/ID 값을 생성하고 있습니다. dtpick 클래스에 많은 수의 입력이 있다면'$ ('.dtpick'). datetime'과'$ ('# uniqueID') 사이에 성능 차이가 있습니까? datetime ({? –

클래스는 고유 한 ID보다 더 우아 할 것이므로 더 나은 방법이 될 것입니다. 그러나 다른 누군가가 나와 함께 교정 할 수 있습니다. –

JavaScript/jQuery + datetime picker : 동적으로 추가 된 입력에 fire datetime picker가 표시되지 않습니다.

답변

관련 문제