javascript - 从对话框附加 html 后，JqueryUI DateTimePicker 按钮停止工作

Question

我的日期时间选择器出现这个问题，它在附加 html 表格后停止工作。

我有一个打开对话框的按钮。这包含要输入的字段，当单击“保存”时，它将值作为记录添加到 html 表中。 这工作正常，但是，当再次打开对话框时，日期时间选择器按钮不再起作用。

对话框表单有多个日期时间选择器，但是，我简化了一个问题示例。

请看我的jsfiddle下面是一个例子。

    $(".datepicker").datepicker({
        dateFormat: "yy-mm-dd", timeFormat: "HH:mm", hourMin: 0, hourMax: 24, stepMinute: 10
    });

    var dialog;

    dialog = $("#addnewDialog").dialog({
        autoOpen: false,
        height: 250,
        width: 350,
        modal: true,
        buttons: {
            "Save": addnewrec,
            Cancel: function () {
                dialog.dialog("close");
            }
        },
        open : function() {

        },
        close: function () {

        }
    });

    $("#AddNew").button().on("click", function () {
        dialog.dialog("open");
    });

    function addnewrec() {
        var valid = true;

        var dealerref = $('#tblInput').find('#DealerRef').val();
        var dtCreated = $('#tblInput').find('#DTCreated').val();

        if (valid) {

            var td1 = '<td id=DealerRef>' + dealerref + '</td>';
            var td2 = '<td id=DTCreated>' + dtCreated + '</td>';

            $("#tblStyle tbody").append("<tr><td></td>" +
                td1 + td2 + "</tr>");

            dialog.dialog("close");
        }

        return valid;
    }

JSFiddle

Answer 1

这是因为您在表 td 中生成与您的日期选择器 ID 相同的 ID，所以它第一次工作，然后在将 td 附加到表中之后，timepicker 上的选择将由于重复的 id 项目抛出错误

还知道，在 HTML 页面中，您应该始终为一个且仅一个元素使用 ID，否则使用类。

您最后可以通过生成 changine timepicker id 或通过递增为 td's 生成其他 id 来解决此问题，例如:

查看此 Fiddle

片段:

$(function () {

        $(".datepicker").datepicker({
            dateFormat: "yy-mm-dd", timeFormat: "HH:mm", hourMin: 0, hourMax: 24, stepMinute: 10
        });
        var increment = 0;
        var dialog;

        dialog = $("#addnewDialog").dialog({
            autoOpen: false,
            height: 250,
            width: 350,
            modal: true,
            buttons: {
                "Save": addnewrec,
                Cancel: function () {
                    dialog.dialog("close");
                }
            },
            open : function() {
               
            },
            close: function () {

            }
        });

        $("#AddNew").button().on("click", function () {
            dialog.dialog("open");
        });

        function addnewrec() {
            var valid = true;

            var dealerref = $('#tblInput').find('#DealerRef').val();
            var dtCreated = $('#tblInput').find('#DTCreated').val();
         
            if (valid) {
								increment++;
                var td1 = '<td id=DealerRef'+increment+'>' + dealerref + '</td>';
                var td2 = '<td id=DTCreated'+increment+'>' + dtCreated + '</td>';
               
                $("#tblStyle tbody").append("<tr><td></td>" +
                    td1 + td2 + "</tr>");

                dialog.dialog("close");
            }

            return valid;
        }

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<input id="AddNew" type="button" value="Add New Activity" class="btn btn-default" />
        <br /><br />
    <div id="addnewDialog" title="Add New Activity">
    
     <table id="tblInput">
            <tbody>
                <tr>
                    <td>
                        DealerRef
                    </td>
                    <td>
                       <input id="DealerRef" name="DealerRef" type="text" value="">
                    </td>                                   
                </tr>               
                <tr>                   
                  <td>
                    DTCreated
                  </td>
                  <td>
                    <input class="datepicker" id="DTCreated" name="DTCreated" type="text" value="">
                  </td>
                </tr>
            </tbody>
        </table>
    </div>
    
     <table id="tblStyle">
                <thead>
                    <tr>
                        <th>DealerRef</th>
                        <th>DTCreated</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>