イベントを1回だけ実行したい場合

.fugaが複数ある場合
マウスオーバーそのものを1回だけ実行させたいですが
うまく行きません。賢い書き方を教えて下さい。

$(function(){
		   var cnt=0;
		   if(cnt==0){
			   $(".fuga").one("mouseover",function(){
												   $(this).after('<div>moge</div>');
												cnt++;
											});
			   }
});

kei344

2016/04/21 02:33

コードはコードブロックで囲んでください。```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答2件

やりたいことはこういうことでしょうか。次のコードでは、mouseover のイベントハンドラの中で mouseover イベントのハンドラを削除しています。

javascript
1$(function() {
2  $('.fuga').on('mouseover', function() {
3    $(this).after('<div>moge</div>');
4    $('.fuga').off('mouseover');
5  });
6});

ご提示のコードでは、.one() でそれぞれの .fuga 要素に一度だけ実行されるハンドラが定義されるだけで、ハンドラの登録解除の仕組みがありません。したがって、.fuga 要素分だけイベントハンドラが実行可能です。cnt はカウントアップされていきますが、すでに .one() で登録してあるので、意味をなしません。

投稿2016/04/21 03:17

unau

総合スコア2468

rainbowsix

2016/04/21 03:24

なるほど！勉強になりました。ありがとうございます。

行動規範の内容に同意します

ベストアンサー

JavaScript
1$( function() {
2	$( '.fuga' ).one( 'mouseover', function() {
3		$( this ).after( '<div>moge</div>' );
4		$( '.fuga' ).off( 'mouseover' );
5	} );
6} );