带有 jQ​​uery ajax 加载的 Star Rating 小部件

Question

页面首次加载到浏览器时效果很好

但是，当 DIV 容器包含此星级评级时，问题就开始了，并且再次使用 Ajax 负载加载。它被重置为原来的单选按钮：

使这个评级星工作的代码很简单，如下所示：

星级小部件插件：

$("#stars-wrapper").stars({
  cancelShow: false,
  disabled: true
});

<span id="stars-wrapper">
                <input type="radio" id="rate1" name="newrate" value="1" title="Poor" />
                <input type="radio" id="rate2" name="newrate" value="2" title="Not that bad" />
                <input type="radio" id="rate3" name="newrate" value="3" title="Average" />
                <input type="radio" id="rate4" name="newrate" value="4" title="Good" />
                <input type="radio" id="rate5" name="newrate" value="5" title="Perfect" />
 </span> 

Ajax 加载：

$('#content_pane').load( href );

有人知道如何解决这个问题吗？它似乎不适用于 Ajax 负载。

Answer 1

您遇到的问题是您目前只绑定到页面上已经存在的元素。当您使用 AJAX 请求将新数据加载到页面中时，您的星星小部件不活动，因此不会绑定到这些新元素。

您需要在 AJAX 加载中重新绑定到这些元素，如下所示：

$('#content_pane').load( href, function() {
  $("#stars-wrapper").stars({
    cancelShow: false,
    disabled: true
  });
});

也许您的小部件包含 live API，但 live 在 jQuery 中已被弃用。