JQueryでクリックされた要素が何番目かを取得すると不具合が起こる。

投稿者: Anonymous
$('.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が別の名前になっていたので、修正しました。

解決

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

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

$('<div class = "example"></div>').appendTo("#container").on('click', function(){
    index = $('.example').index(this);
    console.log(index + 'th item clicked!');
});
回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *