【jQuery】カスタムイベントと.on()

質問

お世話になります。

題名の通りなのですが、どうにも上手く動きません。
１．カスタムイベントの作成（bind）と初期着火
$(element).on('myEvent', function() {
　$(this).myPlugin();
}).trigger('myEvent');

２．ajaxで作成された要素に(.live())
$(document).on('myEvent', '.myClass', function() {
　$(this).trigger('myEvent');
} );

１は問題なく期待した通り動作します。
２は、まったく動きません。
※myPluginは有名なjQueryプラグインです。

それぞれをチェーンで繋いでみたり、セレクターを変えてみたりと試しているのですが、
どうにも解決できないので、お知恵をお貸し下さい。
よろしくお願いいたします。

回答No.1

blue-goheimochi · ベストアンサー

回答をさせていただくにあたり、２の状況で期待する動作が、

・ajaxで動的に要素が複数生成される
・生成された複数の要素に、カスタムイベント（myEvent）が設定される
・各要素の生成と同時に、カスタムイベント(myEvent)が発生する

と考えさせていただきました。

結論から申し上げると、
onを使ったカスタムイベントの指定ですと
初期着火は難しいのが現状かと思います。

代替案としましては、
http://blog.mach3.jp/2010/12/element-on-ready-by-jquery.html
こちらのURLが参考になるかと思いますが、
要素の追加と同時にその要素にイベントを設定する形で実現できるのではないかな・・・
と思います。

下記、ご提示いただいていたスクリプトの私なりの所見です。

１のスクリプトにおいてはチェーンにより、

○elementにカスタムイベント(myEvent)を設定
↓
○trigger('myEvent')によりカスタムイベント(myEvent)が発生
↓
○$(this).myPlugin();を実行

という流れで処理が行われますので、
カスタムイベントの設定後すぐに、カスタムイベントが発生するようになります。

２のスクリプトにおいては、
$(this).trigger('myEvent');
で、着火させる形ではないかとお見受けするのですが、
現状ままですと、

○.myClassを持った要素が追加されると同時にカスタムイベント(myEvent)が設定される。

といったところまでで、処理がストップしてしまっています。

また、現状の$(this).trigger('myEvent');の位置ですと、

○myEventが発生した場合に、$(this).trigger('myEvent');が実行される。

というような挙動になってしまうかと思います。

ですので、

$(document).on('myEvent', '.myClass', function() {
$(this).trigger('myEvent');
} );

$('.myClass').trigger('myEvent');

というように、トリガを別途指定してあげれば、トリガ自体は発生するかと思うのですが、
この形だとmyEventが無限ループしてしまいます。。

以上になります。
何卒よろしくお願いします。

お礼

blue-goheimochi様

丁寧かつ、分かりやすいご説明、大変参考になりました。ありがとうございます！
「２の状況で期待する動作」については、御察しの通りでございます。

> 要素の追加と同時にその要素にイベントを設定する形で実現できるのではないかな・・・

上記の考え方の元、ソースを見直しました。
結果として、

jQuery(function($) {
function myEvent() {
$(".myClass").myPlugin();
}
myEvent();
$.ajax(…).done(myEvent());
});

実際にajaxで更新している部分へ.done()メソッドを付け、ajaxで追加更新された要素に対して'myEvent'を実行する事で、一応の期待した動作を確保しました。

カスタムイベント難しいです。。

補足

.on()を使った方法のアイデアを引き続き募集します。
よろしくお願いいたします。