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 に答える