Показатель ботстрапа, показанный два раза

Question

Я использую этот plugin, чтобы показать рейтинг звезд на моем сайте Bootstrap. Вот часть модального кода, в котором я ставлю оценку звезды (см входной элемент):

 <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="userTitle"></h4> 
     <input id="avg" class="rating" min=0 max=5 step=0.1 data-size="xs" data-readonly="true" data-show-clear="false" data-show-caption="false"> 
     <small id="tot_reviews"></small> 
     </div> 
     <div class="modal-body"> 

Вот часть JS кода, в котором я динамически установить значение звезд:

$.getJSON("getData.php?rating=" + user.id, function(data) { 
    if (data) { 
     $.each(data, function(key, val) { 
      var reviews = val.tot_reviews; 

      $('#avg').rating('update', val.average); 
      $("#tot_reviews").html("(" + reviews + " reviews)").html(); 
     }); 
    } 
}); 

кажется, работает хорошо, на самом деле, когда я нажимаю на элемент страницы я получаю это:

Если я снова нажмите на тот же товар я получаю это:

Я не могу понять, почему это происходит.

Answer 1

Несколько советов, чтобы проверить:

• Примечание если вы установили вход class=rating плагин будет автоматически инициализируется без необходимости яваскрипта код на вашей стороне в Initialize. Это упоминается в usage section of the docs, plugin features, а также с first example on the basic usage section документации.
• Следовательно, если вы используете свой собственный javascript для инициализации плагина, то НЕ установите class = rating, иначе у вас будет две параллельные инициализации , вызывающие нежелательные эффекты.

Кроме того, вы можете также отметить:

• Убедитесь, что вы имеете уникальный идентификатор для элемента ввода HTML на странице. Дублирование идентификатора будет иметь нежелательные эффекты и разбить звезду рейтинг jquery plugin, который использует идентификатор элемента для инициализации. Для примера , если у вас несколько рейтингов на странице <input id="avg"> должно быть уникальным с чем-то вроде <input id="avg-1">, <input id="avg-2"> и так далее.
• У вас есть цикл в вашем коде $.each ... не уверен, что это делает ... , но он обновляет рейтинг. Убедитесь, что вы являетесь , не каким-то образом уничтожая элемент с ajax визуализированным HTML и повторно инициализируя другой - дублируя отображаемый рейтинг.