セレクターにイベントを追加する(jQuery)

セレクターで要素を指定し、イベントを設定することができます。
イベントとはマウスでのクリック、マウスオーバーするときに発生する処理のことを言います。

定義した要素にイベントを追加する

セレクターに定義済みの要素にイベントを追加することができます。
例えば、動的に生成したHTMLにボタンがあった場合、生成後に設定しないと、イベント認識できません。

書き方は以下の２通りがあります。

$(セレクター).イベント(function(){;
処理内容
});

$(セレクター).bind(イベント,function(){
処理内容
});

//クリックのイベントを追加する
$("a").click(function(){
alert("click!!");
});

イベントを追加した後は、unbindでイベントを削除できます。

$(セレクター).unbind(イベント)

//クリックのイベントを削除する
$("a").unbind("click");

未定義の要素にイベントを追加する

liveを使うと、動的に生成する予定の未定義の要素にイベント追加しておくことができます。

HTMLを生成するごとにイベントを記述する必要がないので非常に便利な機能です。

イベントを追加するときの書き方は以下の通りです。

$(セレクター).live(イベント,function(){
処理内容
});

イベントを削除するときの書き方は以下の通りです。

$(セレクター).die(イベント,function(){
処理内容
});

//クリックのイベントを追加する
$("a").live(function(){
alert("click!!");
});

//クリックのイベントを削除する
$("a").die(function(){
alert("click!!");
});

一度だけ実行できるイベントを追加する

oneを使うと、最初の一度だけ実行できるイベントを追加することができます。
例えば、登録ボタンを2回以上クリックされたくない場合などに利用できます。

$(セレクター).one(イベント,function(){
処理内容
});

//クリックのイベントを追加する
$("a").one(function(){
alert("click!!");
});