如何将datePicker绑定到新的动态字段

Question

我花了一天多花时间搜索解决方案。我运行了jQuery 1.8.1和jQuery UI 1.9.1。

用户将一个数字放在输入字段中，并在动态输入字段中即时创建。这些输入字段需要附加jQuery UI datepicker。那就是问题。

我编写此代码，它不起作用

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

控制台获得"单击"可以，所以我确定DOM正在获取在dateInput（）函数中运行的所有内容。我还遇到了这个堆叠的问题，这是一个相同的问题，但迄今为止的问题有点远。我尝试了这个主题中的所有内容，但没有看到任何结果。

Answer 1

这是您追求的吗？

jsfiddle在这里

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();
    }