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

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