最新のWeb開発のチュートリアル
 

jQuery on() Method

<jQueryのイベントメソッド

クリックイベントをアタッチ<p>要素:

$("p").on("click", function(){
    alert("The paragraph was clicked.");
});
»それを自分で試してみてください

定義と使用法

on()メソッドは、選択した要素と子要素のための1つまたは複数のイベントハンドラをアタッチします。

jQueryのバージョン1.7のように、 on()メソッドは、新しいの代替品であるbind(), live()delegate()メソッドは。 このメソッドは、APIへの一貫性の多くをもたらし、そして我々はそれがjQueryのコードベースを簡素化するようにあなたは、この方法を使用することをお勧めします。

注:イベントハンドラは、使用して取り付けられたon()メソッドは、(スクリプトによって作成された新しい要素のような)現在および将来の要素の両方のために動作します。

ヒント:使用し、イベントハンドラを削除するにはoff()メソッドを。

ヒント:使用して、一度だけ実行され、自身を削除し、イベントをアタッチするにはone()メソッドを。


構文

$(selector).on(event,childSelector,data,function,map)

パラメーター 説明
event 必須。 一つ以上の指定event(s)または名前空間は、選択した要素にアタッチします。

複数のイベント値は、スペースで区切られます。 有効なイベントでなければなりません
childSelector 任意。 イベントハンドラのみ(非推奨のように、そしてないセレクタそのもの指定した子要素にアタッチすることを指定しdelegate()メソッド)。
data 任意。 関数に沿って渡すための追加データを指定します。
function 必須。 イベントが発生したときに実行する関数を指定します
map 指定イベントマップ( {event:function, event:function, ...})のイベントが発生したときに実行するように選択された要素にアタッチし、機能するために、1つ以上のイベントを含みます

それを自分で試してみてください - 例

以下からの変更bind()on()
使用方法on()と同じ効果を達成するためにbind()

以下からの変更delegate()on()
使用方法on()と同じ効果を達成するためにdelegate()

以下からの変更live()on()
使用方法on()と同じ効果を達成するためにlive()

複数のイベントを添付
どの要素に複数のイベントを接続します。

マップパラメータを使用して、複数のイベントハンドラをアタッチ
どのようにマップパラメータを使用して、選択した要素に複数のイベントハンドラを接続します。

要素にカスタムイベントを添付
要素にカスタマイズされた名前空間のイベントをアタッチする方法。

関数にデータに沿って渡します
関数へのデータに沿って通過する方法。

将来の要素のためのイベントハンドラを追加します。
ことを示しているon()メソッドもまだ作成されていない要素のために働きます。

イベントハンドラを削除します
使用してイベントハンドラを削除する方法off()メソッドを。


<jQueryのイベントメソッド