0

使用日期选择器时我有一些奇怪的行为。当我加载页面并直接单击日期选择器输入时，没有任何反应。当我再次单击时，没有任何反应。但是当我单击另一个输入字段然后再试一次 datepicker 字段时，它会显示出来。

在我将 datepicker 触发器放入实时函数后，问题出现了，因为我有将动态生成的输入。

这是我的代码：

$(".date").on('click', function() {
    $(this).datepicker({
        dateFormat: "dd.mm.yy",
        altField: $(this).closest("td").find(".dateFormated"),
        altFormat: "yy-mm-dd"
    })
})

编辑：我已经看到live()从 1.7 开始已弃用。因此，我切换live()到on(). 虽然没有解决问题。

整个 HTML

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="gencyolcu" />

    <title>Untitled 1</title>
    <link rel="stylesheet" href="http://localhost:8082/ivy/page/designer/ZWM$1/css/cupertino/jquery-ui-1.9.2.custom.css" />
    <script type="text/javascript" src="http://localhost:8082/ivy/page/designer/ZWM$1/jquery.min.js"></script>
    <script type="text/javascript" src="http://localhost:8082/ivy/page/designer/ZWM$1/js/jquery-ui-1.9.2.custom.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            counter = 0;

            $("#addRow").click(function() {
                counter++;

                rowHtml = '\
                <tr class="datarow" id="row' + counter + '">\
                    <td><input type="text" class="date" /><input type="text" class="dateFormated" /></td>\
                    <td><input type="text" class="from" /></td>\
                    <td><input type="text" class="to" /></td>\
                    <td>\
                        <select class="type">\
                            <option value="1">Typ 1</option>\
                            <option value="2">Typ 2</option>\
                        </select>\
                    </td>\
                    <td class="removeRow" id=' + counter + '>X</td>\
                </tr>';

                $('#submitButton').before(rowHtml);
            })

            $(".removeRow").live("click", function() {
                id = $(this).attr("id");
                $("#row" + id).remove();
            })

            $("[name=formZeitdaten]").submit(function(i) {
                values = "";
                $(".datarow").each(function(j) {
                    tr = $(this);
                    date = tr.find('td').find('.date').val();
                    from = tr.find('td').find('.from').val();
                    to = tr.find('td').find('.to').val();
                    type = tr.find('td').find('.type').val();
                    values = values + date + ',' + from + ',' + to + ',' + type + ';';
                })
                console.log(values);
                $("[name=dataset]").val(values);
            })

            $("#slider").slider({
                range: true,
                min: 0,
                max: 1440,
                step: 15,
                values: [30, 210],
                slide: function(event, ui) {
                    $(".date").val(ui.values[0] + ":" + ui.values[1]);
                }
            });

            $(".date").on('click', function() {
                $(this).datepicker({
                    dateFormat: "dd.mm.yy",
                    altField: $(this).closest("td").find(".dateFormated"),
                    altFormat: "yy-mm-dd"
                })
            })
        });
    </script>
</head>

<body>
<span id="test"></span>
<form name="formZeitdaten" method="post">
    <table id="zeitdaten">
        <tr>
            <td>Datum</td>
            <td>Von</td>
            <td>Bis</td>
            <td>Typ</td>
            <td id="addRow"><input type="button" value="Hinzufügen" /></td>
        </tr>

        <tr class="datarow">
            <td><input type="text" class="date" /><input type="text" class="dateFormated" /></td>
            <td><input type="text" class="from" /></td>
            <td><input type="text" class="to" /></td>
            <td>
                <select class="type">
                    <option value="1">Typ 1</option>
                    <option value="2">Typ 2</option>
                </select>
            </td>
            <td></td>
        </tr>

        <tr id="submitButton">
            <td><input type="submit" /></td>
        </tr>
    </table>
</form>
<div id="slider"></div>
</body>
</html>
4

2 回答 2

0

在您的 addRow 函数中，添加：

$("#row"+counter+" .date").datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: 0,
    showButtonPanel: true,
    showAnim: 'show'
});

将元素添加到 DOM 之后。然后，您可以稍后摆脱该$(".date").on('click',...)语句。

于 2012-12-12T08:43:26.253 回答
-1

这应该适合你

$('.date').datepicker({ 
            dateFormat: 'dd-mm-yy',
            minDate: 0, 
            showButtonPanel: true, 
            showAnim: 'show' 
        });
于 2012-12-12T07:52:55.557 回答