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

Question

我的datetimepicker在追加html表后停止工作，我遇到了这个问题。

我有一个打开对话框的按钮。这包含要输入的字段，单击“保存”时，它会将值作为记录添加到html表中。这很好，但是，再次打开对话框时，datetimepicker按钮不再起作用。

对话框表单有多个datetimepickers，但是，我简化了一个问题的示例。

请参阅下面的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中产生了与你的datepicker id相同的id，因此它第一次工作然后将td附加到表中后，select on timepicker会因重复的id项而引发错误

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

您可以通过生成更改timepicker id或通过增量为qazxsw poi生成其他ID来解决此问题，例如：

看到这个td's

片段：

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;
        }

    });