0
$('.example').on('click', function(){
    var index = $('.example').index(this);
    console.log(index + 'th item clicked!');
});

上のコードはexampleというクラスをもつ要素をクリックすると、呼ばれるのですが、
このとき、コンソールで確認すると 一回のクリックで同じログが4,5個表示されます。

一回のクリックで一回のログを表示するにはどうすればよいでしょうか。

追加:

HTML

<div id = "container"> </div>

JS

//Ajaxを行って通信が成功した場合、以下のように要素を追加しています。
$("#container").append('<div class = "example"></div>');

$('.example').on('click', function(){
    index = $('.example').index(this);
    console.log(index + 'th item clicked!');
});

質問の参考コードの

index = $('.example').index(this);

この部分の.exampleが別の名前になっていたので、修正しました。

2
  • 1
    imageboxというclassも使われているようですが、現象が再現できるHTMLを書いてもらってもいいですか?
    – ironsand
    Commented 2016年5月22日 14:32
  • 失礼しました、imageboxは正しくは .example です。
    – kratos
    Commented 2016年5月22日 17:10

1 件の回答 1

3

要素を追加する度にまとめてイベント登録をしているのが(重複して登録することになる)原因だと思います。

修正するにはいくつか方法があると思いますが、appendToを使って追加する要素を主としてそれに1つ1つの要素に都度イベントを追加するような形にすればいいかと思います。
コード例。

$('<div class = "example"></div>').appendTo("#container").on('click', function(){
    index = $('.example').index(this);
    console.log(index + 'th item clicked!');
});
1
  • おっしゃる通りでした、「要素を追加する度にまとめてイベント登録をしている」のを修正したところ、無事期待通りの動作になりました。ありがとうございます。
    – kratos
    Commented 2016年5月22日 19:18

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。