Question

我正在使用jquery rating plugin，我在这样的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>

Jquery的：

$("#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});
});

但它不起作用。

Answer 1

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

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

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});
    });
});

Answer 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/

插件无法使用ajax加载的内容

2 个答案: