부트 스트랩이 자바 스크립트에서 작동하지 않고 외부에서 작동하는 이유는 무엇입니까?자바 스크립트에서 부트 스트랩 datepicker가 작동하지 않습니다.
var date = new Date();
\t \t date.setDate(date.getDate());
$('.datepicker').datepicker({
\t startDate: date,
autoclose: true,
format: "mm-dd-yyyy",
todayHighlight: true,
orientation: "top auto",
todayBtn: true,
todayHighlight: true,
});
var rowCount = 1;
function removeRow(removeNum) {
jQuery('#rowCount'+removeNum).remove();
rowCount --;
rcount();
}
function addMoreRows(frm) {
rowCount ++;
var recRow = '<p id="rowCount'+rowCount+'"><tr><td><input id="datepkr" class="form-control datepicker" style="width:60%; float:left;" name="" type="text"/></td><td><a style="float:left;" href="javascript:void(0);" onclick="removeRow('+rowCount+');"><i class="glyphicon glyphicon-remove" style="color:red;"></i></a></td></tr></p>';
jQuery('#addedRows').append(recRow);
\t \t if (rowCount>15){
\t \t \t $('#btnAdd').prop('disabled', true);
\t \t }
}
function rcount(){
\t if (rowCount==3){
\t \t jQuery('#x2').hide('slow');
\t \t jQuery('#x3').show('slow'); \t
\t \t }
\t \t if (rowCount==4){
\t \t jQuery('#x3').hide('slow');
\t \t jQuery('#x4').show('slow'); \t
\t \t }
\t \t if (rowCount==5){
\t \t jQuery('#x4').hide('slow');
\t \t jQuery('#x5').show('slow'); \t
\t \t }
\t \t if (rowCount==6){
\t \t jQuery('#x5').hide('slow');
\t \t jQuery('#x6').show('slow'); \t
\t \t }
\t \t if (rowCount==7){
\t \t jQuery('#x6').hide('slow');
\t \t jQuery('#x7').show('slow'); \t
\t \t }
\t \t if (rowCount==8){
\t \t jQuery('#x7').hide('slow');
\t \t jQuery('#x8').show('slow'); \t
\t \t }
\t \t if (rowCount==9){
\t \t jQuery('#x8').hide('slow');
\t \t jQuery('#x9').show('slow'); \t
\t \t }
\t \t if (rowCount==10){
\t \t jQuery('#x9').hide('slow');
\t \t jQuery('#x10').show('slow'); \t
\t \t }
\t \t if (rowCount==11){
\t \t jQuery('#x10').hide('slow');
\t \t jQuery('#x11').show('slow'); \t
\t \t }
\t \t if (rowCount==12){
\t \t jQuery('#x11').hide('slow');
\t \t jQuery('#x12').show('slow'); \t
\t \t }
\t \t if (rowCount==13){
\t \t jQuery('#x12').hide('slow');
\t \t jQuery('#x13').show('slow'); \t
\t \t }
\t \t if (rowCount==14){
\t \t jQuery('#x13').hide('slow');
\t \t jQuery('#x14').show('slow'); \t
\t \t }
\t \t if (rowCount==15){
\t \t jQuery('#x14').hide('slow');
\t \t jQuery('#x15').show('slow'); \t
\t \t }
\t \t if (rowCount==16){
\t \t jQuery('#x15').hide('slow');
\t \t jQuery('#x16').show('slow'); \t
\t \t }
\t \t
\t \t if (rowCount>14){
\t \t \t $('#btnAdd').prop('disabled', true);
\t \t }
\t \t else{
\t \t \t $('#btnAdd').prop('disabled', false);
\t \t }
}
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/blogController.js"></script>
<table> \t
\t <tr id="rowId">
\t <td><input name="" type="text" value="" class="datepicker"/></td>
\t <td><button type="button" id="btnAdd" onclick="addMoreRows()" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i>ADD</button></td>
\t </table>
\t <div id="addedRows"></div>
</td>
</tr>
Here it is Showing the Datepicker but in a javascript generated input its not showing
희망 누군가가 도움이 될 것입니다 :
여기 내 코드입니다. 감사 .
나는 당신이 "자바 스크립트 내부에"보여주는 아니에요 무슨 뜻인지 이해가 완전히 확실하지 않다. 내부는 어디에 있습니까? JavaScript 외부는 어디에 있습니까? – AgataB
새 행을 동적으로 추가 한 후 DatePicker를 다시 초기화해야합니다. @Hardik Patel의 대답이 효과가 있다고 생각합니다. 행운을 빕니다. – Qutayba
먼저 첫 번째 줄이 잘못 초기화됩니다. 구체적으로, 이것은 :'$ ('datepicker')'.. datepicker 란 무엇입니까? 클래스 (그 전에.) 또는 ID (앞에 # 추가)? –