입력 상자가 동적으로 생성 된 경우 datetimepicker가 작동하지 않습니다.

동적으로 행을 추가하는 버튼이 있습니다. 행에는 일부 입력 및 선택 상자가 있습니다. 입력 상자 중 하나에서 datetimepicker를 사용하는 동안 복제 된 입력 상자는 datetimepicker를 표시 할 수 없으며 첫 번째 입력 만 가능합니다.입력 상자가 동적으로 생성 된 경우 datetimepicker가 작동하지 않습니다.

아래 코드는 누구나 도움을 줄 수 있습니까?

function addRow(tableID) { 
 
    var table = document.getElementById(tableID); 
 
    var rowCount = table.rows.length; 
 
    var row = table.insertRow(rowCount); 
 
    var colCount = table.rows[0].cells.length; 
 
    for(var i=0; i<colCount; i++) { 
 
    var newcell = row.insertCell(i); 
 
    newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
 

 
    } 
 
} 
 

 
$(document).ready(function() { 
 
    $('.datetimepicker').datetimepicker({ 
 
     format : "YYYY-MM-DD", 
 
     ignoreReadonly: true 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<input type="button" value="Add row" onClick="addRow('dyn_table')" /> 
 
<table class="table" id="dyn_table"> 
 
    <tbody><tr><td><input type="checkbox" class="dyn_xbPayment big-checkbox" name="chk[]" checked="checked" /></td> 
 
     <td> 
 
     <div class="form-group"> 
 
      <label for="dyn_payment_method">Payment Method</label> 
 
      <select name="dyn_item_code[]" class="dyn_item_code form-control"> 
 
      <option disabled="" selected="" value=""> -- select an option -- </option> 
 
      <option value="cash">Cash</option> 
 
      <option value="cheque">Cheque</option> 
 
      <option value="tt">TT</option> 
 
      <option value="cc">Credit Card</option> 
 
      </select> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="dyn_amount">Amount</label> 
 
      <input type="number" pattern="[0-9].[0-9]" class="dyn_amount" name="dyn_amount[]" step="0.01"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="dyn_reference">Reference Number</label> 
 
      <input type="text" class="dyn_reference form-control" name="dyn_reference[]" > 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="dyn_cheque_date">Cheque Date</label> 
 
      <input type="text" class="dyn_cheque_date form-control datetimepicker" name="dyn_cheque_date[]" > 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

출처

2017-11-09 Isaac

사용 A [위임 이벤트 핸들러 (https://learn.jquery.com/events/event-delegation/) – James

에 대해서도 datapicker로드 jQuery를 말할 html로 '새로운'삽입 한 후

function addRow(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 
    var colCount = table.rows[0].cells.length; 
    for(var i=0; i<colCount; i++) { 
    var newcell = row.insertCell(i); 
    newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
    } 

    setDatepickers(); 
} 

setDatepickers = function() { 
    $('.datetimepicker').datetimepicker({ 
     format : "YYYY-MM-DD", 
     ignoreReadonly: true 
    }); 
} 

$(document).ready(function() { 
    setDatepickers(); 
})

을 그 이유는 새로운 genereted 요소에 플러그인을 다시 적용해야하기 때문입니다.

여기

function addRow(tableID) { 
 
    var table = document.getElementById(tableID); 
 
    var rowCount = table.rows.length; 
 
    var row = table.insertRow(rowCount); 
 
    var colCount = table.rows[0].cells.length; 
 
    for (var i = 0; i < colCount; i++) { 
 
    var newcell = row.insertCell(i); 
 
    newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
 

 
    } 
 
    ApplyPicker(); 
 
} 
 

 
function ApplyPicker() { 
 
    $('.datetimepicker').datetimepicker({ 
 
    format: "YYYY-MM-DD", 
 
    ignoreReadonly: true 
 
    }); 
 
} 
 

 
$(document).ready(function() { 
 
    ApplyPicker(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<input type="button" value="Add row" onClick="addRow('dyn_table')" /> 
 
<table class="table" id="dyn_table"> 
 
    <tbody> 
 
    <tr> 
 
     <td><input type="checkbox" class="dyn_xbPayment big-checkbox" name="chk[]" checked="checked" /></td> 
 
     <td> 
 
     <div class="form-group"> 
 
      <label for="dyn_payment_method">Payment Method</label> 
 
      <select name="dyn_item_code[]" class="dyn_item_code form-control"> 
 
      <option disabled="" selected="" value=""> -- select an option -- </option> 
 
      <option value="cash">Cash</option> 
 
      <option value="cheque">Cheque</option> 
 
      <option value="tt">TT</option> 
 
      <option value="cc">Credit Card</option> 
 
      </select> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="dyn_amount">Amount</label> 
 
      <input type="number" pattern="[0-9].[0-9]" class="dyn_amount" name="dyn_amount[]" step="0.01"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="dyn_reference">Reference Number</label> 
 
      <input type="text" class="dyn_reference form-control" name="dyn_reference[]"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <div class="col-lg-12"> 
 
      <label for="dyn_cheque_date">Cheque Date</label> 
 
      <input type="text" class="dyn_cheque_date form-control datetimepicker" name="dyn_cheque_date[]"> 
 
      </div> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

출처

2017-11-09 13:27:58

안녕하세요, 당신은 또한 스타일링 왜 달력을 볼 수 있습니다 상자가 범위를 벗어 났습니까? – Isaac

@ user8913806 당신은 상대 위치 컨테이너로 포장하거나 bootstrap에'col-x-size' 클래스로 알려야합니다. 내 편집을보십시오. 모든 것이 똑같아 보이기를 원한다면 같은 클래스를 추가해야합니다. –

은 자바 스크립트 코드에 작은 변화를 확인하십시오 : 당신은 당신이 새로운 요소

출처

2017-11-09 13:27:08

당신은 솔루션

$(document).ready(function() { 
 
    
 
    $('.datetimepicker').datetimepicker({ 
 
    format : "YYYY-MM-DD", 
 
    ignoreReadonly: true 
 
    }); 
 
    
 
    addRow = function(tableID) { 
 
    var table = document.getElementById(tableID); 
 
    var rowCount = table.rows.length; 
 
    var row = table.insertRow(rowCount); 
 
    var colCount = table.rows[0].cells.length; 
 
    for(var i=0; i<colCount; i++) { 
 
     var newcell = row.insertCell(i); 
 
     newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
 
    } 
 
    
 
    $('.datetimepicker').datetimepicker({ 
 
     format : "YYYY-MM-DD", 
 
     ignoreReadonly: true 
 
    }); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<input type="button" value="Add row" onClick="addRow('dyn_table')" /> 
 
<table class="table" id="dyn_table"> 
 
    <tbody><tr><td><input type="checkbox" class="dyn_xbPayment big-checkbox" name="chk[]" checked="checked" /></td> 
 
     <td> 
 
     <div class="form-group"> 
 
      <label for="dyn_payment_method">Payment Method</label> 
 
      <select name="dyn_item_code[]" class="dyn_item_code form-control"> 
 
      <option disabled="" selected="" value=""> -- select an option -- </option> 
 
      <option value="cash">Cash</option> 
 
      <option value="cheque">Cheque</option> 
 
      <option value="tt">TT</option> 
 
      <option value="cc">Credit Card</option> 
 
      </select> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="dyn_amount">Amount</label> 
 
      <input type="number" pattern="[0-9].[0-9]" class="dyn_amount" name="dyn_amount[]" step="0.01"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="dyn_reference">Reference Number</label> 
 
      <input type="text" class="dyn_reference form-control" name="dyn_reference[]" > 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="dyn_cheque_date">Cheque Date</label> 
 
      <input type="text" class="dyn_cheque_date form-control datetimepicker" name="dyn_cheque_date[]" > 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

이 당신을 도울 것입니다 희망과 함께 할 것입니다.

출처

2017-11-09 13:29:12 Shiladitya

날짜 선택 도구 코드를 에 추가하면 addRow 기능이 작동합니다.

function addRow(tableID) { 
 
    var table = document.getElementById(tableID); 
 
    var rowCount = table.rows.length; 
 
    var row = table.insertRow(rowCount); 
 
    var colCount = table.rows[0].cells.length; 
 
    for(var i=0; i<colCount; i++) { 
 
    var newcell = row.insertCell(i); 
 
    newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
 
    } 
 
    
 
    $('.datetimepicker').datetimepicker({ 
 
     format : "YYYY-MM-DD", 
 
     ignoreReadonly: true 
 
    }); \t 
 
} 
 

 
$(document).ready(function() { 
 
    $('.datetimepicker').datetimepicker({ 
 
     format : "YYYY-MM-DD", 
 
     ignoreReadonly: true 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script> 
 

 
<input type="button" value="Add row" onClick="addRow('dyn_table')" /> 
 
<table class="table" id="dyn_table"> 
 
    <tbody><tr><td><input type="checkbox" class="dyn_xbPayment big-checkbox" name="chk[]" checked="checked" /></td> 
 
     <td> 
 
     <div class="form-group"> 
 
      <label for="dyn_payment_method">Payment Method</label> 
 
      <select name="dyn_item_code[]" class="dyn_item_code form-control"> 
 
      <option disabled="" selected="" value=""> -- select an option -- </option> 
 
      <option value="cash">Cash</option> 
 
      <option value="cheque">Cheque</option> 
 
      <option value="tt">TT</option> 
 
      <option value="cc">Credit Card</option> 
 
      </select> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="dyn_amount">Amount</label> 
 
      <input type="number" pattern="[0-9].[0-9]" class="dyn_amount" name="dyn_amount[]" step="0.01"> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="dyn_reference">Reference Number</label> 
 
      <input type="text" class="dyn_reference form-control" name="dyn_reference[]" > 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="dyn_cheque_date">Cheque Date</label> 
 
      <input type="text" class="dyn_cheque_date form-control datetimepicker" name="dyn_cheque_date[]" > 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

출처

2017-11-09 13:32:13

입력 상자가 동적으로 생성 된 경우 datetimepicker가 작동하지 않습니다.

답변

관련 문제