날짜 시간 선택기가 자바 스크립트 코드 내에서 작동하지 않습니다

Question

내 날짜 시간 선택기는 자바 스크립트 코드 안에 넣을 때 작동하지 않지만 외부 자바 스크립트가 작동하면 잘 작동합니다. 누구든지이 문제를 해결할 수 또는 아래에 비슷한 방식으로 자바 스크립트 코드 외부에 배치 된 날짜 - 시간 선택기 액세스 할 수있는 방법을 말할 수있는 경우. 아래 코드에서 선택 상자 선택 이벤트를 기반으로 폼 요소를 동적으로 추가하고 있습니다.

function addToFilter(divName) 
 
{ 
 
    var val= document.getElementById('filter').value; 
 
    var newdiv = document.createElement('div'); 
 
    switch(val) 
 
    { 
 
    case 'mcus': 
 
     newdiv.innerHTML = "Multi company use case &nbsp: "+ 
 
     "<select id='mcuc_selection'>"+ 
 
     "<option value='select'>--select--</option><option value='ags'>AGS</option><option value='agl'>AGL</option><option value='nafn'>NAFN</option></select>"+ 
 
     "&nbsp;<img id='remove-icon' src='remove-icon.jpg' alt='remove' onmouseover='' style='cursor: pointer;'>"+ 
 
     "<hr style='width:700px; margin-left:0px;'>"; 
 
     break; 
 

 
    case 'oc': 
 
     newdiv.innerHTML = "Order Condition &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: <select id='oc_selection'><option value='select'>--select--</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select> &nbsp;<img id='remove-icon' src='remove-icon.jpg' alt='remove' onmouseover='' style='cursor: pointer;'><hr style='width:700px; margin-left:0px;'>"; 
 
     break; 
 

 
    case 'ot': 
 
     newdiv.innerHTML = "Order Type &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: <select id='oc_selection'><option value='select'>--select--</option><option value='shadow'>shadow</option><option value='customer'>customer</option></select> &nbsp;<img id='remove-icon' src='remove-icon.jpg' alt='remove' onmouseover='' style='cursor: pointer;'><hr style='width:700px; margin-left:0px;'>"; 
 
     break; 
 

 
    case 'dt': 
 
     newdiv.innerHTML = "Date&Time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:"+ 
 
     "<div id='startDate' class='input-append date'>"+ 
 
     "<label>Start Date&Time: </label>"+ 
 
     "<input type='text' style='width:200px; height:15%'></input>"+ 
 
     "<span class='add-on' style='height:26px'>"+ 
 
     "<i id='dateIcon1' data-time-icon='icon-time' data-date-icon='icon-calendar'></i>"+ 
 
     "</span>"+ 
 
     "</div>"+ 
 
     "<div id='endDate' class='input-append date' style='margin-left:400px; margin-top:-30px'>"+ 
 
     "<label>End Date&Time:&nbsp;</label>"+ 
 
     "<input type='text' style='width:200px; height:15%'></input>"+ 
 
     "<span class='add-on' style='height:26px'>"+ 
 
     "<i id='dateIcon1' data-time-icon='icon-time' data-date-icon='icon-calendar'></i>"+ 
 
     "</span>"+ 
 
     "</div>"+ 
 
     "&nbsp;<img id='remove-icon' src='remove-icon.jpg' alt='remove' onmouseover='' style='cursor: pointer;'><hr style='width:700px; margin-left:0px;'>"; 
 
     break; 
 

 
    } 
 
    document.getElementById(divName).appendChild(newdiv); 
 
} 
 

 

 
$('#startDate').datetimepicker({ 
 
    format: 'dd/MM/yyyy hh:mm:ss PP', 
 
    language: 'en', 
 
    pick12HourFormat: true 
 
}); 
 
$('body').click(function (evt) { 
 
    $(".startDate, .dropdown-menu").css("display","none"); 
 
}); \t 
 
$('#endDate').datetimepicker({ 
 
    format: 'dd/MM/yyyy hh:mm:ss PP', 
 
    language: 'en', 
 
    pick12HourFormat: true 
 
}); 
 
$('body').click(function (evt) { 
 
    $(".endDate, .dropdown-menu").css("display","none"); 
 
}); \t

모든

Answer 1

먼저이 중복 될 두 번째 행에서의 startDate와 endDate가에 대한 날짜 선택기를 추가 할 때 있도록, addToFilter 함수 내에서, 같은 ID를 가진 두 개의 요소를 가질 수 없습니다 당신이보기에 HTML 요소를 밀 때 어떤 식 으로든 두 번째

에서 작동하지 않습니다, 당신은

이

그래서 코드가

될 것 날짜 선택기를 호출 할 필요가

function addToFilter(divName) 
{ 
    var val= document.getElementById('filter').value; 
    var newdiv = document.createElement('div'); 
    switch(val) 
    { 
    case 'mcus': 
     newdiv.innerHTML = "Multi company use case &nbsp: "+ 
     "<select id='mcuc_selection'>"+ 
     "<option value='select'>--select--</option><option value='ags'>AGS</option><option value='agl'>AGL</option><option value='nafn'>NAFN</option></select>"+ 
     "&nbsp;<img id='remove-icon' src='remove-icon.jpg' alt='remove' onmouseover='' style='cursor: pointer;'>"+ 
     "<hr style='width:700px; margin-left:0px;'>"; 
     break; 

    case 'oc': 
     newdiv.innerHTML = "Order Condition &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: <select id='oc_selection'><option value='select'>--select--</option><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option></select> &nbsp;<img id='remove-icon' src='remove-icon.jpg' alt='remove' onmouseover='' style='cursor: pointer;'><hr style='width:700px; margin-left:0px;'>"; 
     break; 

    case 'ot': 
     newdiv.innerHTML = "Order Type &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: <select id='oc_selection'><option value='select'>--select--</option><option value='shadow'>shadow</option><option value='customer'>customer</option></select> &nbsp;<img id='remove-icon' src='remove-icon.jpg' alt='remove' onmouseover='' style='cursor: pointer;'><hr style='width:700px; margin-left:0px;'>"; 
     break; 

    case 'dt': 
     newdiv.innerHTML = "Date&Time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:"+ 
     "<div class='startDatePicker input-append date'>"+ 
     "<label>Start Date&Time: </label>"+ 
     "<input type='text' style='width:200px; height:15%'></input>"+ 
     "<span class='add-on' style='height:26px'>"+ 
     "<i id='dateIcon1' data-time-icon='icon-time' data-date-icon='icon-calendar'></i>"+ 
     "</span>"+ 
     "</div>"+ 
     "<div class='endDatePicker input-append date' style='margin-left:400px; margin-top:-30px'>"+ 
     "<label>End Date&Time:&nbsp;</label>"+ 
     "<input type='text' style='width:200px; height:15%'></input>"+ 
     "<span class='add-on' style='height:26px'>"+ 
     "<i id='dateIcon1' data-time-icon='icon-time' data-date-icon='icon-calendar'></i>"+ 
     "</span>"+ 
     "</div>"+ 
     "&nbsp;<img id='remove-icon' src='remove-icon.jpg' alt='remove' onmouseover='' style='cursor: pointer;'><hr style='width:700px; margin-left:0px;'>"; 
     break; 

    } 
    document.getElementById(divName).appendChild(newdiv); 
    bindDatePickers($('#'+divName)) 
} 

function bindDatePickers(element) { 
    $($(element).find('.startDatePicker')).datetimepicker({ 
     format: 'dd/MM/yyyy hh:mm:ss PP', 
     language: 'en', 
     pick12HourFormat: true 
    }); 

    $($(element).find('.endDatePicker')).datetimepicker({ 
     format: 'dd/MM/yyyy hh:mm:ss PP', 
     language: 'en', 
     pick12HourFormat: true 
    }); 
} 

$('body').click(function (evt) { 
    $(".startDate, .dropdown-menu").css("display","none"); 
}); 
$('body').click(function (evt) { 
    $(".endDate, .dropdown-menu").css("display","none"); 
});