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

时间:2018-03-01 08:16:51

标签: javascript jquery html jquery-ui

我的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

1 个答案:

答案 0 :(得分:2)

这是因为您在表td中生成了与您的日期选择工具ID相同的ID,所以它首次运行后将td附加到表中,选择开启timepicker会因重复的id项目而引发错误

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

您可以通过增加生成引擎时间选择器ID或生成td's的其他ID来解决此问题,例如:

请参阅此Fiddle

摘录:

&#13;
&#13;
$(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;
        }

    });
&#13;
<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>
&#13;
&#13;
&#13;