javascriptの中でブートストラップのdatepickerが機能しない

Question

なぜブートストラップはjavascriptの内部では動作しませんが、外部で動作します。

ここに私のコードです：

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

は、誰かが助けることを願っています。ありがとう。

Answer 1

JSコードを修正する必要があります。以下のコードを試してください。

$(document).ready(function() { 
    bindDatePicker($('.datepicker')); 

    $('button#btnAdd').click(function() { 
    var recRow = '<tr><td><input class="form-control datepicker" style="width:60%; float:left;" name="" type="text"/></td></tr>'; 
    alert(recRow); 
     jQuery('#addedRows').append(recRow); 
     bindDatePicker($('.datepicker')); 
     if (rowCount>15){ 
      $('#btnAdd').prop('disabled', true); 
     } 
    }); 
}); 

function bindDatePicker(element) { 
     $(element).datepicker({   
      autoclose: true, 
      format: "mm-dd-yyyy", 
      todayHighlight: true, 
      orientation: "top auto", 
      todayBtn: true, 
      todayHighlight: true, 
     }); 
} 

あなたはデモのために、ここで確認できます。JSFIDDLE