Bootstrap星级显示两次

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，则插件将为自动 初始化没有您需要的javascript代码 初始化。这在usage section of the docs中提到， plugin features以及文档的first example on the basic usage section。
• 因此，如果您使用自己的javascript来初始化插件，请不要 设置class = rating，否则你将有两个并行 初始化导致不良影响。

此外，您还可以注意：

• 确保页面上的HTML输入元素具有唯一ID。 复制ID将产生不良影响并打破明星 评级jquery插件，它使用元素ID进行初始化。对于 例如，如果您在页面上有多个评分<input id="avg"> 对<input id="avg-1">，<input id="avg-2">等内容应该是唯一的。
• 你的代码中有一个循环$.each ...不确定那是做什么的...... 但它正在更新评级。确保你 不会以某种方式用ajax渲染HTML和破坏元素 重新初始化另一个 - 重复评级显示。