如何將jquery datepicker添加到動態創建的輸入中，該輸入位於名爲page的ajax中

Question

請原諒我，如果這已得到解答，但我已使用不同搜索詞的創意版本搜索此網站並且空白。

我有一個php網頁（的index.php），使用ajax加載另一個php頁（dataQuery.php）上它具有一個html形式。我創建了一個小腳本（addInput()），允許用戶動態添加儘可能多的輸入字段到這個表單。其中一個字段是我想要附加日期選擇器的日期字段。在過去，我已將任何javascript包含到ajax回調中，但在這種情況下，我無法使其正常工作。

這裏是我的function Query()：

function Query()  
{ 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("container").innerHTML=xmlhttp.responseText; 

    // Tried this suggestion found on stackoverflow: 
    $('body').on('focus',".newlabour_date", function(){ 
    $(this).datepicker();}); 

    // And this one: 
    $("#newlabour_date").datepicker(); 
    } 
    } 
xmlhttp.open("GET","/process/dataQuery.php",true); 
xmlhttp.send(); 
} 

這裏是我的function addInput()

function addInput(table,counter,rowcount) 
{ 
var counter = document.getElementById(counter); 
var number = counter.value; 
counter.value = ++counter.value; 

var rowcount = (rowcount*1+1); // muliply the rowcount by 1 to ensure it doesn't get treated as a concatenation. 

var table = document.getElementById(table); 
var row = table.insertRow(rowcount); 
row.align = "center"; 

var cell1 = row.insertCell(0); 
cell1.className = "bBottom"; 
cell1.width = "20%"; 
cell1.height = "21"; 

cell1.innerHTML = "<input type=\"text\" style=\"position:relative; top:2px;\" 
class=\"noborder\" name=\"newlabour_date["+number+"]\" id=\"newlabour_date["+number+"]\" size=\"15\" maxlength=\"\" placeholder=\"\" value=\"\">"; 
} 

我不知道這是可能的，但我有一種感覺它。感謝任何幫助。

Answer 1

有一些錯誤，你的代碼，你已經錯過了newlabour_date所生成的輸入字段 和table.insertRow(rowcount);給予了憤怒的錯誤。

沒有Ajax

工作的示例： http://jsfiddle.net/qxarbpcc/

這是你addInput功能的更新版本：

function addInput(table,counter,rowcount) 
{ 
    var counter = document.getElementById(counter); 
    var number = counter.value; 
    counter.value = ++counter.value; 

    var rowcount = parseInt(rowcount)+1; // muliply the rowcount by 1 to ensure it doesn't get treated as a concatenation. 

    var table = document.getElementById(table); 
    var row = table.insertRow(0); 
    row.align = "center"; 

    var cell1 = row.insertCell(0); 
    cell1.className = "bBottom"; 
    cell1.width = "20%"; 
    cell1.height = "21"; 

    cell1.innerHTML = "<input type=\"text\" style=\"position:relative; top:2px;\" class=\"noborder newlabour_date\" name=\"newlabour_date["+number+"]\" id=\"newlabour_date["+number+"]\" size=\"15\" maxlength=\"\" placeholder=\"\" value=\"\">"; 
} 

你的Ajax回調然後改成這樣：

if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 
    document.getElementById("container").innerHTML=xmlhttp.responseText; 

    $('body').on('focus',".newlabour_date", function(){ 
    $(this).datepicker();}); 
} 

別t忘記在頭部添加jquery和jqueryui。