MVC Core动态生成表格中DateTimePicker无法显示问题求助

嗨，我来帮你排查下问题，顺便给你修正方案～

问题根源 #

你遇到的动态生成输入框的datepicker不生效，主要有两个核心原因：

• DOM元素未挂载就初始化：你在循环里刚拼接完input的HTML字符串，还没把它添加到页面的DOM树中，就急着调用$("#datetimepick").datepicker()，这时候jQuery根本找不到这个元素，初始化自然不会生效。
• 重复ID的问题：循环生成的每个日期输入框都用了同一个id="datetimepick"，HTML里ID必须是唯一的，这不仅不符合规范，还会导致后续选择器无法正确定位到每个动态生成的元素。

修正方案 #

我们需要调整逻辑顺序：先把所有动态生成的HTML插入到DOM中，再去初始化datepicker；同时把重复的ID改成类名，方便批量选择元素。

修正后的完整代码如下：

<body>
    <div class="table-responsive">
        <select id="NumOfRow" name="NumOfRow" class="form-control">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
        <input id="DateOfBirth" type="text" /> <!-- 这个正常工作 -->
        <div id="adTable"></div>
    </div>
    <script src="~/lib/jquery/jquery-2.1.1.min.js"></script>
    <script src="~/lib/jquery/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
    <script type="text/javascript">
        // 初始化静态的datepicker
        $("#DateOfBirth").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: "dd/mm/yy",
            yearRange: "-77:+00",
            showAnim: "clip"
        });

        $(document).ready(function () {
            $('#NumOfRow').change(function () {
                CreateTable();
            });
        });

        function CreateTable() {
            $('#adTable').empty();
            var x = $('#NumOfRow').val();
            var complete = '';

            // 先拼接所有HTML内容
            for (i = 1; i <= x; i++) { // 修正循环条件，避免选1时不生成表格
                complete += `
                    <table>
                        <tr>
                            <td>Vessel Name</td>
                            <td><input id="Name_${i}" type="text"/></td> <!-- 给name输入框加唯一ID -->
                        </tr>
                        <tr>
                            <td>Date Of Birth</td>
                            <td><input class="datetimepick" type="text"/></td> <!-- 用类名代替重复ID -->
                        </tr>
                    </table>
                `;
            }

            // 先把拼接好的HTML插入到DOM中
            $('#adTable').append(complete);

            // 最后初始化所有动态生成的datepicker
            $(".datetimepick").datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: "dd/mm/yy",
                yearRange: "-77:+00",
                showAnim: "clip"
            });
        }
    </script>
</body>

额外优化点 #

1. 把showAnim参数直接整合到datepicker的初始化配置里，不用单独调用datepicker("option", ...)，简化代码。
2. 给动态生成的Vessel Name输入框也添加了唯一ID（Name_${i}），彻底避免ID重复问题。
3. 修正了循环条件：原代码i < x会导致选择值为1时不生成表格，改成i <= x更符合预期。

内容的提问来源于stack exchange，提问作者Sarah