2

我正在使用一个 jquery评级插件，我在这样的 div 上使用它：

HTML：

<div id="highlighted" class="span6">
<div class="row">
    <div id="high-desc" class="span4">
        <span class="movie-title fat"><a class="strong" href="movies.jsp?id=5">Watchmen</a> (2009)</span><br />
        <div id="rating"></div>
    </div>
</div>

查询：

$("#rating").rateit({
    max: 10,
    min: 0,
    step: 1
});

它工作得很好。但是，当我用div#highlighted其他内容（如下所示）替换的内容时，插件不起作用。

$('// some link').on("click", function(){ 
    var Id = // some id
    title="reco_product_stream.jsp?type=high&id="+Id;
    ('#highlighted').load(title);
});

我什至尝试在每个 ajax 调用上重新加载插件，如下所示：

$('// some link').on("click", function(){ 
    var Id = // some id
    title="reco_product_stream.jsp?type=high&id="+Id;
    ('#highlighted').load(title);
    $("#rating").rateit({max: 10, min: 0, step:1});
});

但它不起作用。

4

2 回答 2

3

您确实需要在动态添加的内容上重新初始化插件。

为此，您必须使用回调函数等待请求完成。

jQuery 的load方法与大多数 ajax 方法一样是异步的。

http://api.jquery.com/load/

$('// some link').on("click", function(){ 
    var Id = // some id
    title="reco_product_stream.jsp?type=high&id="+Id;
    ('#highlighted').load(title,function(){ //callback executes after load
        $("#rating").rateit({max: 10, min: 0, step:1});
    });
});
于 2013-01-04T14:09:12.350 回答
2 
$('// some link').on("click", function(){ 
    var Id = // some id
    title="reco_product_stream.jsp?type=high&id="+Id;
    $('#highlighted').load(title);
    $("#rating").rateit({max: 10, min: 0, step:1});
});

在上面，您的代码$("#rating").rateit({max: 10, min: 0, step:1});在 .load 完成加载之前执行。

与 .load 回调一起使用。

$('#highlighted').load(title, function(){
 $("#rating").rateit({max: 10, min: 0, step:1});
});

http://api.jquery.com/load/

于 2013-01-04T14:08:20.440 回答