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(); 

когда я динамически добавлять новые дивы в док. Рейтинг не отображается, если я не использую $('.rating').jRating(); в функции щелчка.

Проблема:, когда я динамически добавляю четыре div и нажимаю на первый добавленный div ajax, стреляющий 4 раза. Это относится к 4 другим элементам. например, при нажатии 3-го добавочного 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();  
});