Ajax在動態創建的元素上觸發很多次

Question

我正在使用這個插件jrating。 https://github.com/alpixel/jRating。

HTML

<button class="btn">ADD</button> 


<div id="doc"></div> 

JQUERY

$(document).on('click', '.btn', function() { 
    $('#doc').append('aaa<div class="rating" id="0_5"></div>'); 
    $('.rating').jRating(); 
}); 
$('.rating').jRating(); 

當我動態地添加新的div到文檔。如果我不在點擊功能中使用$('.rating').jRating();，則不會顯示評分。

問題：當我動態地追加四個div並點擊第一個附加的div ajax發射4次。這繼續4所有其他元素。比如點擊第三次附加div 3次，第二次2次。不知道爲什麼會這樣

小提琴：http://jsfiddle.net/TFWXG/

Answer 1

當你做$('.rating').jRating();單擊處理程序裏面，你一次又一次地初始化爲目前所有的rating元素在頁面插件，而不是僅僅用於初始化的新元素

$(document).on('click','.btn',function(){ 
    $('aaa<div class="rating" id="0_5"></div>').appendTo('#doc').jRating();  
});