带有jQuery 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，但{j}已弃用live。