25086

[code]

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

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

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

追加:

HTML

[code]

    <div id = "container"> </div>
    
[/code]

JS

[code]

    //Ajaxを行って通信が成功した場合、以下のように要素を追加しています。
    $("#container").append('<div class = "example"></div>');
    
    $('.example').on('click', function(){
        index = $('.example').index(this);
        console.log(index + 'th item clicked!');
    });
    
[/code]

質問の参考コードの

[code]

    index = $('.example').index(this);
    
[/code]

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


CC BY-SA 3.0
2016-05-22T12:18:40.513
25083
2016-05-22T18:42:24.107
2016-05-22T17:09:22.663
13404
13404
question
javascript jquery
JQueryでクリックされた要素が何番目かを取得すると不具合が起こる。


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

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

[code]

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


CC BY-SA 3.0
2016-05-22T18:42:24.107
25086
2016-05-22T18:42:24.107
5044
25083
answer