Question

我正在从AJAX响应中接收数据，并且尝试在成功回调中使用该值更新jQuery插件：

$.ajax({
   url: '/some/url',
   type: 'GET',
   dataType: 'json',
   success: (data) => {
      $(".my-rating").starRating('setRating', data.rating);
   }
});

我正在使用star-rating-svg插件显示广告（http://nashio.github.io/star-rating-svg/demo/）。问题是我遇到了错误：

未捕获的TypeError：$（...）。starRating不是函数

但是，当在AJAX回调外部调用该函数时，该函数可以完美工作。你知道如何处理吗？

编辑：

我的代码更大：

show.ejs

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="/star-svg/src/jquery.star-rating-svg.js"></script>
    <link rel="stylesheet" type="text/css" href="/star-svg/src/css/star-rating-svg.css">
   </head>    
   <body>
    <div class="my-rating mb-1"></div>

    <script>
    function getUserRating() {
            $.ajax({
                url: '/some/url/rating',
                type: 'GET',
                dataType: 'json',
                success: () => {
                    $(".my-rating").starRating('setRating', data.rating);
                }
            });
        }

    function webpageReady() {
            if($(".my-rating").is(':visible')) {

                $(".my-rating").starRating({
                    starSize: 20,
                    disableAfterRate: false,
                    callback: function(currentRating, $el){
                        $.ajax({
                            url: '/some/url/setRating',
                            type: 'POST',
                            data: {'rating' : currentRating}
                        });
                    }
                });
                getUserRating();
            }
        }
    </script>
    <script type="text/javascript">webpageReady();</script>
    </body>
</html>

rating.js

router.get("/some/url/rating", function (req, res) {
    Rating.findOne({'author.id': req.user._id}).populate("ratings").exec(function(err, rating){
        if(err){
            console.log(err);
        }
        else{
            res.send({userRating : rating});
        }
    });
});

Answer 1

这是此插件的简单演示

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/star-rating-svg@3.5.0/src/jquery.star-rating-svg.js"></script> 

</head>
<body>

<div class="my-rating"></div> 
<script>
$(document).ready(function(){
   $(".my-rating").starRating({
    starSize: 25,
    callback: function(currentRating, $el){
        // make a server call here
    }
});
});
</script>

</body>
</html>

Answer 2

问题已解决：在页脚中还有一个指向jquery的链接。

AJAX回调看不到jQuery插件的方法

2 个答案: