Javascript 日期选择器不处理克隆行

我发现了这个斑马日期选择器，但我的问题是，日期在克隆行上不起作用。。。这是我的小提琴代码： html

雇主名称
雇主地址
从…起
到

javascript

$(document).ready(function() {

    $('#datepicker-example7-start').Zebra_DatePicker({
        direction: false,
        pair: $('#datepicker-example7-end')
    });

    $('#datepicker-example7-end').Zebra_DatePicker({
        direction: true
    });

});

$(document).ready(function(){
$( "#addrow" ).click(function() {

  var zdp = $('#datepicker-example7-start').data('Zebra_DatePicker');
  var zdp1 = $('#datepicker-example7-end').data('Zebra_DatePicker');
zdp.destroy();
zdp1.destroy();
});
});

function addRowfwemp() {
    /* Declare variables */
    var elements, templateRow, rowCount, row, className, newRow, element;
    var i, s, t;

    /* Get and count all "tr" elements with class="row".    The last one will
     * be serve as a template. */
    if (!document.getElementsByTagName)
        return false; /* DOM not supported */
    elements = document.getElementsByTagName("tr");
    templateRow = null;
    rowCount = 0;
    for (i = 0; i < elements.length; i++) {
        row = elements.item(i);

        /* Get the "class" attribute of the row. */
        className = null;
        if (row.getAttribute)
            className = row.getAttribute('class');
        if (className === null && row.attributes) {    // MSIE 5
            /* getAttribute('class') always returns null on MSIE 5, and
             * row.attributes doesn't work on Firefox 1.0.    Go figure. */
            className = row.attributes['class'];
            if (className && typeof(className) === 'object' && className.value) {
                // MSIE 6
                className = className.value;
            }
        } 

        /* This is not one of the rows we're looking for.    Move along. */
        if (className !== "row_to_clone_fw_emp")
            continue;

        /* This *is* a row we're looking for. */
        templateRow = row;
        rowCount++;
    }
    if (templateRow === null)
        return false; /* Couldn't find a template row. */

    /* Make a copy of the template row */
    newRow = templateRow.cloneNode(true);

    /* Change the form variables e.g. price[x] -> price[rowCount] */
    elements = newRow.getElementsByTagName("input");
    for (i = 0; i < elements.length; i++) {
        element = elements.item(i);
        s = null;
        s = element.getAttribute("name");
        if (s === null)
            continue;
        t = s.split("[");
        if (t.length < 2)
            continue;
        s = t[0] + "[" + rowCount.toString() + "]";
        element.setAttribute("name", s);
        element.value = "";
    }

    /* Add the newly-created row to the table */
    templateRow.parentNode.appendChild(newRow);
    return true;
}

$（文档）.ready（函数（）{
$（“#日期选择器-example7-start”）.Zebra#u日期选择器({
方向：错，
配对：$（“#日期选择器-示例7-end”）
});
$（“#日期选择器-示例7-end”）.Zebra#u日期选择器({
方向：正确
});
});
$（文档）.ready（函数（）{
$（“#添加行”）。单击（函数（）{
var zdp=$（'#datepicker-example7-start'）。数据（'Zebra#datepicker'）；
var zdp1=$（'#datepicker-example7-end'）。数据（'Zebra#datepicker'）；
zdp.destroy（）；
zdp1.destroy（）；
});
});
函数addRowfwemp（）{
/*声明变量*/
var元素、templateRow、rowCount、row、className、newRow、element；
变量i，s，t；
/*使用class=“row”获取并计算所有“tr”元素。最后一个元素将
*作为模板*/
如果（！document.getElementsByTagName）
返回false；/*不支持DOM*/
元素=document.getElementsByTagName（“tr”）；
templateRow=null；
行数=0；
对于（i=0；iprice[rowCount]*/
elements=newRow.getElementsByTagName（“输入”）；
对于（i=0；i

…它可能有点坏，因为我无法上载所有外部资源，但克隆方法和datepicker的调用方式肯定在其中

可以在这里找到原始代码（示例7）：

github上的文件可在此处下载：

---

非常感谢您的帮助！非常感谢…

在将新元素添加到

DOM

我建议您为datepicker输入字段添加一个公共类

<TD>
  <input id="datepicker-example7-start" type="text" name="datefrom[]" class="dp-start"/>
</TD>
<TD>
  <input id="datepicker-example7-end" type="text"  name="dateto[]"  class="dp-end"/>
</TD>

---

我还没有尝试过这个。希望它能起作用。

在将新元素添加到

DOM

我建议您为datepicker输入字段添加一个公共类

<TD>
  <input id="datepicker-example7-start" type="text" name="datefrom[]" class="dp-start"/>
</TD>
<TD>
  <input id="datepicker-example7-end" type="text"  name="dateto[]"  class="dp-end"/>
</TD>

---

我没有尝试过这个。希望它能起作用。

你需要重新绑定克隆行nx，我该怎么做？我尝试在销毁方法后再次调用日期选择器，但它只在以下行上显示日历图标，但无法单击

code

$（“#日期选择器-example7-start”）。Zebra\u日期选择器({方向：false，配对：$（'#datepicker-example7-end'））；$（'#datepicker-example7-end'）。Zebra_datepicker（{方向：true}）；为此，您需要重新绑定克隆的行tnx，我该如何做？我尝试在销毁方法后再次调用日期选择器，但它只在以下行上显示日历图标，但无法单击（“#datepicker-example7-start”）。Zebra_datepicker（{方向：false，对：$（“#datepicker-example7-end'））$（“#datepicker-example7-end”）。Zebra_datepicker（{direction:true}）；你能帮我通过上面的脚本说明你的想法吗？谢谢。我已经破坏了插件，单击“addrow”按钮，然后再次调用克隆函数。

$（“#addrow”）。单击（函数（）{var zdp=$（“#datepicker-example7-start”）.data（'Zebra_DatePicker'）；var zdp1=$（'#DatePicker-example7-end'）。data（'Zebra_DatePicker'）；zdp.destroy（）；zdp1.destroy（）

@jake:更新了答案。请检查谢谢你@nauphal…你的想法太棒了，但我用了id，没有工作，从没想过类能成功…非常感谢你…我在appendchild后再次调用日期选择器…只是有一个小故障，如果单击日历图标，日期选择器不会加载，你需要点击输入框本身，而不是日历图标。你能通过上面的脚本来帮助我说明你的想法吗？谢谢。我已经在点击“addrow”按钮后销毁了插件，然后再次调用克隆函数。

$（“#addrow”）。点击（函数（）{var zdp=$（“#datepicker-example7-start”）。数据（'Zebra#datepicker'）var zdp1=$（“#datepicker-example7-end”）.data（'Zebra_datepicker'）；zdp.destroy（）；zdp1.destroy（）；

@jake:更新了答案。请检查谢谢你的想法，我用了id，没有工作

$('.dp-start:last').Zebra_DatePicker({
    direction: false,
    pair: $('.dp-end:last')
});

$('.dp-end:last').Zebra_DatePicker({
    direction: true
});