jquery datepicker 不显示动态添加的输入答案

【问题标题】：jquery datepicker doesn't show on dynamically added inputjquery datepicker 不显示动态添加的输入
【发布时间】：2013-01-13 20:08:20
【问题描述】：

我有一个表格，每个单元格都是表格的一部分。在我的表单中，我有一个 jquery datepicker 应用于输入元素：

<form method="post" action="test.php">
                <table>
                    <tr>
                     ....
                        <td>
                            <input type="text" id="date" name="test"/>
                        </td>
                     ....
                    </tr>
                </table>
                <button type="button" id="addLine">Add line</button>
                <button id="submit" type="submit">Submit</button>
            </form>

我这样添加我的日期选择器：

$(document).ready(function() {
            $('#date').datepicker({showAnim: "slideDown"});   
        });

问题来了...我想在表格中添加一行，但日期选择器不适用于新添加的行...

$(document).ready(function() {
            $('#addLine').click(function() {
                var line = $('<tr>...<input type="text" id="date" name="test"/>...</tr>');
                $('table').append(line);
              });
        });

新行出现，但是当我想插入一个值时，日期选择器不会在新创建的行上弹出。

我尝试在我的 .click(function... 中添加另一个 $('#date').datepiker()... 但它不起作用。我还尝试刷新 dom使用名为 page() 的方法.. 但我有一个错误，该方法在元素上不存在。我需要你的帮助！

谢谢

【问题讨论】：

标签： jquery-ui dom dynamic jquery-ui-datepicker jquery-append

【解决方案1】：

您不能有多个具有相同值的 id，这可能会导致您的一些问题。请改用类名，例如class="date"

<input type="text" class="date" name="test"/>

由于您是动态添加内容，加载后您可以触发datePicker 函数。

所以：

line.find(".date").datepicker({showAnim: "slideDown"})

示例：http://jsbin.com/omoyiy/2/edit

【讨论】：