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

【问题标题】：AJAX callback does not see jQuery plugin's methodAJAX 回调看不到 jQuery 插件的方法
【发布时间】：2019-02-21 06:49:02
【问题描述】：

我正在接收来自 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/)。问题是我有一个错误：

未捕获的类型错误：$(...).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});
        }
    });
});

【问题讨论】：

您是否尝试在 ajax 调用之外声明成功函数（而不是内联声明）？
你确定ajax调用成功了吗？你检查控制台是否有错误？您是否尝试在 success 回调中记录一些内容？
是的，ajax 响应 100% 成功，我正在接收我想要的数据。我试图制作一个外部完成的函数 $.ajax({...}).done(function(data){...});但结果相同
您是否将代码分解为 HTML 和 jquery 调用？如果是这样，您可以将其添加到您的帖子中吗？
@mrWalker，我整理了 Vasim 答案的修改版本来测试您的问题，但无法复制您的问题。所以它可能是由其他代码引起的。你能把你的代码分解成一个像 Vasim 的答案这样的框架，然后测试一下，然后在这里发布吗？

标签： javascript jquery node.js ajax

【解决方案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>

【讨论】：

这很清楚，关键是如何在 AJAX 成功回调中更改它的值？
这不能回答 OP 的问题。

【解决方案2】：

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

【讨论】：