如何將datepicker綁定到新的動態字段？

Question

我花了一天時間尋找解決方案。我運行了Jquery 1.8.1和Jquery UI 1.9.1。

用戶在輸入字段中輸入數字並動態創建動態輸入字段。這些輸入字段需要附加一個Jquery UI日期選擇器。那就是問題所在。

我寫此代碼，這是行不通的

function dateinput(){ 
    console.log('clicked'); 
    var dateinput = $('.hasDatepicker'); 
     dateinput.datepicker("option", "dateFormat", 'mm/dd/yy'); 
     dateinput.datepicker({ 
      showAnim : 'fold' 
     }); 
    } 

控制檯獲得「點擊」 OK，所以我相信DOM越來越被這個dateinput（）函數運行一切。我也碰到這stackoverflow question這是同樣的問題，但它的有點過時了。我嘗試了這個話題中的所有內容，但沒有看到任何結果。

Answer 1

這是你在追求什麼？

JsFiddle Here

HTML

<input id="numberToCreate" maxlength="1" /> 
<input id="addInput" type="button" value="Add Input" /> 
<div id="inputs"></div> 

jQuery的

$(function(){ 
    $('#addInput').click(function() { 
     var numberToCreate = $('#numberToCreate').val(); 
     for (var i = 1; i <= numberToCreate; i++) 
     { 
      $('<input />').datepicker().appendTo('#inputs'); 
     } 
     return false; 
    }); 
}); 

Answer 2

function getPhase() 
{ 

$(document).click(function(){ 
    $(".date").datepicker({ 
        dateFormat: "dd/mm/yy", 
        showOn: "button", 
        buttonImage: "images/calendar.gif", 
        buttonImageOnly: true, 
        //minDate: '-16d -1m', 
        //maxDate: '-6d -1m', 
        onSelect: function(dateText, inst) { 
         $(this).focus(); 
        } 
     }); 
}); 
    /*i++; 


    if(i>30) 
    { 
     alert("Maximum Allows 30 Entries! Please Press Save Button"); 
     return false; 
    }*/ 
    var in_tbl_name="dataTable"; 


    var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0]; 
    // create row 
    var row = document.createElement("tr"); 

    // create table cell 1 
    var td1 = document.createElement("td") 
    var strHtml1="<input name='chk"+count+"' id='chk"+count+"' type='checkbox' value='"+count+"' class='csc_input' >"; 
    td1.innerHTML = strHtml1.replace(/!count!/g,count); 

    // create table cell 2 
    var td2 = document.createElement("td") 
    var strHtml2="<input name='sno"+count+"' id='sno"+count+"' style='width:20px;' type='text' value='"+count+"' class='csc_input' >"; 
    td2.innerHTML = strHtml2.replace(/!count!/g,count); 

    // create table cell 3 
    var td3 = document.createElement("td") 
    var strHtml3="<strong>Phase Demand</strong>"; 
    td3.innerHTML = strHtml3.replace(/!count!/g,count); 

    // create table cell 4 
    var td4= document.createElement("td") 
    var strHtml4 = "<input type='text' size='13' name='kva"+count+"' id='kva"+count+"' class='csc_input' ><B>KVA"; 
    td4.innerHTML = strHtml4.replace(/!count!/g,count); 

    // create table cell 5 
    var td5 = document.createElement("td") 
    var strHtml5 = "<strong>From Date </strong>"; 
    td5.innerHTML = strHtml5.replace(/!count!/g,count); 

    // create table cell 6 
    var td6 = document.createElement("td") 
    var strHtml6 = "<input type='text' name='fyear"+count+"' id='fyear"+count+"' size='13' class='date'>"; 
    td6.innerHTML = strHtml6.replace(/!count!/g,count); 

    // create table cell 7 
    var td7 = document.createElement("td") 
    var strHtml7 = "<strong>End Date</strong>"; 
    td7.innerHTML = strHtml7.replace(/!count!/g,count); 

    // create table cell 8 
    var td8 = document.createElement("td") 
    var strHtml8= "<input type='text' name='year"+count+"' id='year"+count+"' size='13' class='date' >"; 
    td8.innerHTML = strHtml8.replace(/!count!/g,count); 

    // append data to row 
    row.appendChild(td1); 
    row.appendChild(td2); 
    row.appendChild(td3); 
    row.appendChild(td4); 
    row.appendChild(td5); 
    row.appendChild(td6); 
    row.appendChild(td7); 
    row.appendChild(td8); 

    // add to count variable 
    // append row to table 
    count = parseInt(count) + 1; 
    document.f1.count.value=parseInt(document.f1.count.value)+1; 
    //alert("count"+count); 
    // append row to table 
    tbody.appendChild(row); 
    getSno(); 
    }