Javascript 当webb页面第一次加载时，rate js不工作，但附加的html结构可以工作

rateit（）在我第一次加载网页时不起作用。 下面是我的html结构

但是使用动态html结构，它可以工作

function serachCourse(){
                    var request = $.ajax({
                        method:'post',
                        url:'/course/searchCourse',
                        data: $('#searchForm').serialize()
                    });

                    request.done(function(data){
                        var JSONarray = JSON.parse(data);
                        $(".seacharea").empty();
                        var str = "";
                        for(let i = 0 ; i < JSONarray.length ; i++){
                            str +=  `<div class="col-md-6 col-lg-3 col-xs-12">`;
                            str +=  `<div class="services-item wow fadeInRight" data-wow-delay="0.3s">`;
                            str +=  `<div class="icon">`;
                            str +=  `<a href="<%=request.getContextPath()%>/course/course.do?action=showCourseMainPage&courseno=` + JSONarray[i].courseno + `" style="color: rgba(0, 0, 0, 0.65);">`;
                            str +=  `<img src=  "` + JSONarray[i].courseimg + `"style="max-width:100%;height:150px"></div>`;

                            str +=  `<div class="services-content">`;
                            str +=  `&nbsp;&nbsp;<div class="rateit" data-rateit-value="` + JSONarray[i].csscore / JSONarray[i].csscoretimes + `" data-rateit-ispreset="true" data-rateit-readonly="true"></div><br>`;


                            str +=  `&nbsp;&nbsp;&nbsp;` + JSONarray[i].csscoretimes + `comment`;
                            str +=  `<h3 style="font-size:14px;">` + JSONarray[i].coursename + `</h3></a>`;

                            str +=  `<p>CourseTime: `+ Math.floor(JSONarray[i].ttltime/60) +` min</p>`;

                            str +=  `<h5>NT$` + JSONarray[i].courseprice + `</h5></div></div></div>`;
                        }

                        $(".seacharea").append(str);
                        $("div.rateit, span.rateit").rateit();

                        $('.services-item .services-content h3 a').css('font-size','22px');
                        $('.services-item .services-content h3 a').css('color','#333');

                        $('.services-item .services-content h3 a:hover').css('color','#0099CC');
                    });

函数serachCourse（）{
var请求=$.ajax({
方法：'post'，
url:“/course/searchCourse”，
数据：$（'#searchForm'）。序列化（）
});
请求完成（功能（数据）{
var JSONarray=JSON.parse（数据）；
$（“.seacharea”）.empty（）；
var str=“”；
for（设i=0；i`；
str+=`NT$`+JSONarray[i].courseprice+`；
}
$（“.seacharea”）.append（str）；
$（“div.rateit，span.rateit”）.rateit（）；
$（'.services item.services content h3 a'）.css（'font-size'，'22px'）；
$（'.services item.services content h3 a'）.css（'color'，'#333'）；
$（'.services item.services content h3 a:hover'）.css（'color'，'0099CC'）；
});

如何解决这个问题？请谢谢

$(document).ready(function(){
                    $("div.rateit, span.rateit").rateit();
});

function serachCourse(){
                    var request = $.ajax({
                        method:'post',
                        url:'/course/searchCourse',
                        data: $('#searchForm').serialize()
                    });

                    request.done(function(data){
                        var JSONarray = JSON.parse(data);
                        $(".seacharea").empty();
                        var str = "";
                        for(let i = 0 ; i < JSONarray.length ; i++){
                            str +=  `<div class="col-md-6 col-lg-3 col-xs-12">`;
                            str +=  `<div class="services-item wow fadeInRight" data-wow-delay="0.3s">`;
                            str +=  `<div class="icon">`;
                            str +=  `<a href="<%=request.getContextPath()%>/course/course.do?action=showCourseMainPage&courseno=` + JSONarray[i].courseno + `" style="color: rgba(0, 0, 0, 0.65);">`;
                            str +=  `<img src=  "` + JSONarray[i].courseimg + `"style="max-width:100%;height:150px"></div>`;

                            str +=  `<div class="services-content">`;
                            str +=  `&nbsp;&nbsp;<div class="rateit" data-rateit-value="` + JSONarray[i].csscore / JSONarray[i].csscoretimes + `" data-rateit-ispreset="true" data-rateit-readonly="true"></div><br>`;


                            str +=  `&nbsp;&nbsp;&nbsp;` + JSONarray[i].csscoretimes + `comment`;
                            str +=  `<h3 style="font-size:14px;">` + JSONarray[i].coursename + `</h3></a>`;

                            str +=  `<p>CourseTime: `+ Math.floor(JSONarray[i].ttltime/60) +` min</p>`;

                            str +=  `<h5>NT$` + JSONarray[i].courseprice + `</h5></div></div></div>`;
                        }

                        $(".seacharea").append(str);
                        $("div.rateit, span.rateit").rateit();

                        $('.services-item .services-content h3 a').css('font-size','22px');
                        $('.services-item .services-content h3 a').css('color','#333');

                        $('.services-item .services-content h3 a:hover').css('color','#0099CC');
                    });