BinaryDevelop
  1. ホーム
  2. jquery

[解決済み】jQuery Datepickerのonchangeイベント問題

2022-04-03 02:59:40

質問

フィールドを変更すると検索ルーチンが呼び出されるJSコードを持っています。問題は、Datepickerが入力フィールドを更新したときに発生するjQueryイベントを見つけることができないことです。

なぜか、Datepicker がフィールドを更新しても change イベントは呼び出されません。カレンダーがポップアップするときにフォーカスが変わるので、それも使えません。何かアイデアはありますか？

どうすればいいですか？

日付ピッカーの onSelect イベント . 

$(".date").datepicker({
    onSelect: function(dateText) {
        console.log("Selected date: " + dateText + "; input's current value: " + this.value);
    }
});

ライブ例 : 

$(".date")
.datepicker({
    onSelect: function(dateText) {
        console.log("Selected date: " + dateText + "; input's current value: " + this.value);
    }
})
.on("change", function() {
    console.log("Got change event from field");
});

<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

残念ながら onSelect は、日付が選択されるたびに、たとえそれが変更されていなくても起動します。これはdatepickerの設計上の欠陥で、常に onSelect (何も変化していなくても)そして は は、変更時に基礎となる入力に対して何らかのイベントを発生させます。(この例のコードを見ると、変更をリッスンしていますが、イベントが発生しません)。おそらく、変化したときに入力に対してイベントを発生させるべきでしょう (おそらく、通常の change イベントか、あるいはdatepicker専用のイベントか、どちらかです)。

もちろん、お好きな方には change イベントを input を発射する。 

$(".date").datepicker({
    onSelect: function() {
        $(this).change();
    }
});

これは、次のように発射されます。 change の下にある input jQueryでフックされたハンドラに対して。しかし、繰り返しになりますが、それは 常に を発射します。もし本当に変化したときだけ起動させたいなら、前の値を保存しておく必要があります (たぶん data ) と比較します。

ライブ例 : 

$(".date")
.datepicker({
    onSelect: function(dateText) {
        console.log("Selected date: " + dateText + "; input's current value: " + this.value);
        $(this).change();
    }
})
.on("change", function() {
    console.log("Got change event from field");
});

<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します