带 jQuery ajax 加载的星级评定小部件

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 Load：

$('#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 中被弃用。