如何将 jquery datepicker 添加到动态创建的输入中，该输入位于名为页面的 ajax 中

Question

如果这个问题已经得到解答，请原谅我，但我已经使用不同搜索词的创意版本搜索了这个网站，结果是空白。

我有一个php 网页（index.php），它使用ajax 加载另一个php 页面（dataQuery.php），上面有一个html 表单。我创建了一个小脚本 (addInput())，它允许用户根据需要动态地将任意数量的输入字段添加到此表单中。其中一个字段是一个日期字段，我想附加一个日期选择器。过去我在ajax 回调中包含了任何javascript，但是在这种情况下我无法让它工作。

这是我的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();});
}

不要忘记在 head 部分添加 jquery 和 jqueryui。