無法重建對生成的html

Question

日期選擇器產生新的html內容後，我做的事：

var el_1 = $('.index_1').html(); 

$('#payment_block_content').html(el_1); 

這el_1有一個數據字段：

<input class="datepicker form-control hasDatepicker" id="id_date" name="date" type="text" /> 

我怎麼能刷新這個日期選擇？接下來我嘗試：

$("#id_date").on('focus', function(){ 
    $(this).datepicker(); 
}); 

Answer 1

設置HTML後，您可以直接初始化.datepicker()。

此外，您需要刪除hasDatepicker CSS類作爲其內部由jQuery UI組件使用以標識.datepicker()應用於該元素。

$('#payment_block_content').html(el_1); 
$("#id_date").removeClass('hasDatepicker').datepicker(); 

var html = '<input class="datepicker form-control" id="id_date1" name="date" type="text" />'; 
 
$(document.body).append(html); 
 
$("#id_date1").datepicker(); 
 

 

 
var html2 = '<input class="datepicker form-control hasDatepicker" id="id_date2" name="date" type="text" />'; 
 
$(document.body).append(html2); 
 
$("#id_date2").removeClass('hasDatepicker').datepicker();

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>