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，还有第一个例子文档的基本用法部分。
因此，如果您使用自己的 javascript 来初始化插件，请不要设置 class = rating，否则你将有两个并行初始化导致不良影响。

另外你可能还注意到：

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

Bootstrap 星级评分显示两次

Bootstrap star-rating shown two times

jquery

ajax

twitter-bootstrap

plugins

rating