如何将raty插件应用于新生成的div？

Question

我有一个页面，其中包含raty divs。使用经典的代码$('.raty').raty({...});插件在这些现有div上完美地工作。但是，当我通过ajax函数加载新的raty divs时，新的divs“没有转换为星星”。您能帮我找到错误吗？

$.ajax({
    url: '/ws/player/reviews/p/1',
    context: document.body,
    contentType: "application/json; charset=utf-8",
    dataType: "jsonp",
    jsonp: "callback",
    jsonpCallback: "jsonpCallbackfunction",
    success: function(data) {
        $.each(data.response.reviews, function( key, value ) {
            html = '';
            html += '<div class="raty read" data-rating="5"></div>';
            $('#reviews').append(html);
        });

    }
    data: {player_id: player_id, from: $('#reviews').data('from')}
}).done(function() {
    $(this).find('.raty').raty({
        path: '/img/raty/',
        readOnly: true,
        score: function() {return $(this).data('rating');}
    });
});

尽管如此，如果我尝试$(this).find('.raty').html('blablabla');，“blablabla”将在所有“.raty” div中正确显示。

谢谢您的帮助，

杰里米

- Jeremy

---

你需要在ajax函数的成功回调中对动态加载的div初始化raty插件 - 可以在$.each调用内部或之后进行。 - mccannf

这就是我认为在ajax调用之后使用“done”所做的事情。如上所述，在这个ajax调用中，如果我将.raty（替换为.html（，它可以正常工作。因此，我不知道如何重新初始化raty插件？（我也尝试了将代码放入each函数中，但它也不起作用。此外，我真的想只写一次（'.raty'），而不是为每个div写'#raty098098'） - Jeremy

你确定成功回调函数被调用了吗？尝试移除 jsonp: 和 jsonpCallback: 选项，只在 URL 结尾添加 ?callback=? 来查看是否有效。顺便说一下，在这个 fiddle 中是有效的：http://jsfiddle.net/mccannf/Z75xQ/7/ - mccannf

你有没有找到解决办法？ - Zabs

这可能会对你有所帮助.. http://stackoverflow.com/questions/19495461/jraty-jquery-plugin-doesnt-seem-to-work-with-ajax-json/19495752#19495752 - Zabs

Answer 1

你犯了一个小错误。

看看这段代码。

$.ajax({
url: '/ws/player/reviews/p/1',
context: document.body,
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback: "jsonpCallbackfunction",
success: function(data) {
    $.each(data.response.reviews, function( key, value ) {
        html = '';
        html += '<div class="raty read" data-rating="5"></div>';
        $('#reviews').append(html);
    });
}
data: {player_id: player_id, from: $('#reviews').data('from')}}).done(function() {
$(this).find('#reviews .raty').raty({ // Changes
    path: '/img/raty/',
    readOnly: true,
    score: function() {return $(this).data('rating');}
});});

希望这段代码能够工作。

- Vikram