動的に作成された要素クラスにイベントをアタッチしたいので、ライブ関数を使用しましたが、トリガーされませんでした。そこで、live function referenceを確認したところ、以下のような注意書きがありました。
jQuery 1.7より、.live()メソッドは非推奨となりました。on()を使用してください。 イベントハンドラのアタッチには、.on()を使用してください。旧バージョンのjQueryをお使いの方は、以下のようにお使いください。 .live() よりも .delegate() を優先して使用してください。
テキストフィールドは、すでにjquery ui datpickerでアタッチされています。
jQuery("#from").attr('disabled','disabled')
.removeClass('date_picker_bg')
.removeClass('hasDatepicker')
.addClass('date_picker_disabled');
を無効にした後、私はクリックした場合、私はアラートまたはtooltip.soを表示したい、私はこれを試してみましたが、動作していません。
jQuery(".date_picker_disabled").on("click", function(event){
alert('hi');
});
何が問題なのでしょうか?
jquery 1.7.1 ( jquery-1.7.1.min.js ) を使用しています。
問題は、jQuery(".date_picker_disabled")
がそのクラスを持つ要素を見つけ、それらにバインドしていることです。もしバインディングが行われた時点で要素がそのクラスを持っていない場合、イベントは処理されません。
on関数は、イベントが親要素に "bubbles up" されたときに、別の要素でイベントを処理することによって、これを回避することができます。この例では、
body` 要素と言うことができます。もっと具体的な共通の親要素を選択することができるかもしれません。
jQuery(document.body).on('click', '.date_picker_disabled', function(event) {
alert('hi');
});
イベントハンドラは document.body
要素にバインドされています。body 要素のどこかで発生したすべてのクリックは、セレクタにマッチする要素から発生したかどうかがテストされます。もしそうであれば、ハンドラが起動されます。
これは、on
関数のドキュメントで説明されています。これは、以前のバージョンのjQueryにあった live
や delegate
関数と同じ動作です。
あなたのコードをもう一度見てみると、input
要素に disabled="disabled"
が設定されていますね。無効化された要素では click
イベントは発生しません。
これが厄介なんです。
コードが実行されるとき、あなたの要素は .date_picker_disabled
クラスを持っていないので、 jQuery(".date_picker_disabled")
は何も返さず、 .on()
は呼ばれません。
外側の要素に .on() を適用し、セレクタパラメータを使用します。
// you can also do $(document).on()
$(<outer element>).on('click', '.date_picker_disabled', function() {
// do something
});
これは、イベントを <outer element>
に委譲します。このハンドラは、クラス .date_picker_disabled
を持つ要素がクリックされた場合のみ実行されます (2番目のパラメータ)。
.live()
]1 のドキュメントより。
.live()メソッドをその後継メソッドで書き直すのは簡単です。 .live()メソッドを、その後継メソッドで書き直すことは、簡単です。 3つのイベントアタッチメソッドに相当する呼び出しのテンプレートです。 .live()
$(selector).live(events, data, handler); // jQuery 1.3+の場合。 $(document).delegate(selector, events, data, handler); // jQuery 1.4.3以降 $(document).on(events, selector, data, handler); // jQuery 1.7以上
つまり、あなたの場合、こうなります。
$(document).on('click', '.date_picker_disabled', function(event){
alert('hi');
});