web-dev-qa-db-ja.com

jQueryイベントハンドラー.on（）が機能しない

動的に作成された要素クラスにイベントを添付したいので、ライブ関数を使用しましたが、トリガーされませんでした。確認済み ライブ関数参照 、ノートの下に赤があります

JQuery 1.7以降、.live（）メソッドは非推奨になりました。 .on（）を使用して、イベントハンドラーをアタッチします。 jQueryの古いバージョンのユーザーは、.live（）よりも.delegate（）を優先して使用する必要があります。

そのため、 on functionを使用することにしましたが、まだ機能していません。テキストフィールドはすでにjquery ui datpickerでアタッチされています。別の要素では、そのフィールドを無効にします。

jQuery("#from").attr('disabled','disabled')
.removeClass('date_picker_bg')
.removeClass('hasDatepicker')
.addClass('date_picker_disabled');

無効にした後、アラートまたはツールチップを表示したい場合はクリックするので、これを試しましたが、動作しません

jQuery(".date_picker_disabled").on("click", function(event){
          alert('hi');
  });

何が問題なのか

Jquery 1.7.1（jquery-1.7.1.min.js）を使用しています

event-handlingjqueryjquery-ui-datepicker
33
Gowri

問題は、jQuery(".date_picker_disabled")がそのクラスを持つ要素を見つけてそれらにバインドすることです。バインディングの作成時に要素にクラスがない場合、イベントは処理されません。

on関数を使用すると、イベントが親要素に「バブルアップ」するときに別の要素でそれらを処理することにより、これを回避できます。この例では、body要素と言うことができます。より具体的な共通の親を選択できる場合があります。

jQuery(document.body).on('click', '.date_picker_disabled', function(event) {
    alert('hi');
});

これで、イベントハンドラーはdocument.body要素にバインドされました。ボディの任意の場所で発生するすべてのクリックがテストされ、セレクターに一致する要素から発生したかどうかが確認されます。その場合、ハンドラーが起動されます。

これは on 関数のドキュメントで説明されています。これは、liveおよびdelegate関数を使用したjQueryの以前のバージョンに存在していたのと同じ動作です。

コードをもう一度見てみると、input要素にdisabled="disabled"が設定されています。無効な要素ではclickイベントは発生しません。

97
lonesomeday

これには注意が必要です。

コードを実行すると、要素には_.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番目のパラメーター）。

6
Didier Ghys

.live() のドキュメントから：

.live（）メソッドを後継者に関して書き換えるのは簡単です。これらは、3つのイベント添付メソッドすべての同等の呼び出しのテンプレートです。

$(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');
});
5
PPvG

私はjQuery 1.7.2を使用しており、提案されたすべての方法を試しました：

動作しませんでした：

$(document.body).on('click', '.collapsible-toggle'  function() {
    console.log('clicked');
});

動作しませんでした：

$(document).on('click', '.collapsible-toggle'  function() {
    console.log('clicked');
});

私が次のことを試みるまで、それらのどれも機能しませんでした：

-----働いた！----

$('body .collapsible-toggle').on('click',   function() {
        console.log('clicked');
});
2
Eduardo Chongkan

試してください：

$(document.body).on( "click", ".date_picker_disabled", function() {   
   alert('hi');
});

document.bodyは、動的なhtmlに役立ちます。チェックしてみてください： 。onダイナミックHTMLで動作していません

0
Asmita

たぶんあなたはすべきです：

_jQuery("body").on("click",".date_picker_disabled", function(event){
          alert('hi');
  });
_

このようにして、イベントハンドラーをbosyにアタッチし、そのセレクター「.date_picker_disabled」が一致した場合にのみそのイベントを起動するように指定します。
ところで、これはlive()の正確な動作方法です

0
Nicola Peluchetti