Question

我正在开发一个网页，并使用名为star-rank的第三方jQuery插件。当我第一次调用函数等级来绘制星星时，它就起作用了。

在我的场景中，我需要在分页插件的onclick方法中调用它。当用户单击其他页码时，将重新绘制注释区域。但是，奇怪的是，当页面首次加载时，成功调用绘制星级的方法。

但是，当您单击页码时，页面会报告错误，并说 “未捕获的TypeError：$（...）。rating不是函数”；但是我可以肯定，在初始阶段和单击阶段，它都是在onPageClick中调用代码。我看了看控制台，发现第一次初始化它时，原型中的$（'。star-show'）中有一个评级方法，但是当我调用onPageClick并检查对象$（'。star-show时） '），原型中没有评级方法。照片2

第三方插件： https://github.com/kartik-v/bootstrap-star-rating https://github.com/josecebe/twbs-pagination

我的页面已加载所需的js和css文件，如下所示：

<!-- Main Style Sheet -->
<link rel="stylesheet" href="../../static/css/bootstrap3/bootstrap.css">
<link rel="stylesheet" href="../../static/css/like.css">
<link rel="stylesheet" href="../../static/css/star-rating/star-rating.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../../static/js/pagination/jquery.twbsPagination.js"></script>
<script src="../../static/js/star-rating/star-rating.js"></script>
<script src="../../static/js/bootstrap3/bootstrap.js"></script>

<script>
var currentPage = 1;
var totalPage = 5;
var visiblePageNum = 2;
var totalComments = {...}


$('#pagination').twbsPagination({
    totalPages: totalPage,
    visiblePages: visiblePageNum,
    onPageClick: function (event, page) {
        currentPage = page;
        $("#comment-list").empty();
        drawCommentCards(totalComments);
    }
});


function drawCommentCards(datas) {
    console.log("function drawCommentCards: currentpage: " + currentPage);
    console.log("function drawCommentCards: Data: ");
    console.log(datas);

    for (var i = (currentPage - 1) * NumPerPage; i < currentPage * NumPerPage; i++) {

        if (i < datas.length) {
            $("#comment-list").append(drawSingleCommentCard(datas[i], i));
        }
    }

    // here the code has problem saying not a function
    $(document).on('ready', function(){
        // here the code has problem saying not a function
        $(".star-show").rating({displayOnly: true});
    });

}

function drawSingleCommentCard(data, index){
        var html = '';
        if(typeof(data) != 'undefined'){
            html = html + '<div class="comment" number="'+ index +'">'+
               '<li class="media">' +
                    '<div class="media-left">' +
                        '<a href="#">' +
                            '<img class="media-object img-circle" style="height: 70px; width: 70px" src="'+ data.author_avatar +'" alt="photo">' +
                        '</a>' +
                    '</div>' +

                    '<div class="media-body">' +
                        '<h4 class="media-heading inline">'+ data.author_name +'</h4><span>  </span>' +

                        '<div class="caption inline" ><span class="label label-success">'+ data.user_rating +' Stars</span></div>' +
                        '<input value="'+ data.user_rating +'" type="number" class="rating-loading star-show" min=0 max=5 step=0.1 data-size="xs">' +

                        '<p class="inline">'+ data.user_review +'</p><span>   </span>';

            if (data.userId == currentUserId){
                html = html +
                        '<a commentid= "'+ data.commentId +'" class="inline" href="javascript:void(0)" onclick="removeByCommentId(this)">' +
                            '<div class="caption inline" ><span class="label label-danger">Remove</span></div>' +
                        '</a>';
            }

            html = html +
                        '<p>' +
                            '<div class="ds-comment-footer">' +
                                '<span class="ds-time" title="'+ data.time +'">'+ data.time +'</span>&nbsp;'+
                            '</div>'+
                        '</p>' +
                    '</div>' +
                '</li>' +
                '<hr/></div>';
        }

        return html;
    }

</script >

Answer 1

尝试在$( document ).ready()块中运行代码，并确保下一页上具有.star-show类的元素。

检查以下工作样本

var currentPage = 1;
var totalPage = 4;
var visiblePageNum = 2;
var NumPerPage = 1;
var currentUserId = 2;
var totalComments = [{
    author_avatar: "https://www.gravatar.com/avatar/8990b8e611d60bd869d1c4f06ab6351e?s=328&d=identicon&r=PG&f=1",
    author_name: "author name 1",
    user_rating: 1,
    user_review: "",
    commentId: 2,
    userId: 1,
    time: ""
  }, {
    author_avatar: "https://www.gravatar.com/avatar/8990b8e611d60bd869d1c4f06ab6351f?s=328&d=identicon&r=PG&f=1",
    author_name: "author name 2",
    user_rating: 2,
    user_review: "",
    commentId: 2,
    userId: 2,
    time: ""
  }, {
    author_avatar: "https://www.gravatar.com/avatar/8990b8e611d60bd869d1c4f06ab6351g?s=328&d=identicon&r=PG&f=1",
    author_name: "author name 3",
    user_rating: 3,
    user_review: "",
    commentId: 2,
    userId: 3,
    time: ""
  },
  {
    author_avatar: "https://www.gravatar.com/avatar/8990b8e611d60bd869d1c4f06ab6351h?s=328&d=identicon&r=PG&f=1",
    author_name: "author name 4",
    user_rating: 4,
    user_review: "",
    commentId: 2,
    userId: 4,
    time: ""
  }
]

$(document).on('ready', function() {
  $('#pagination').twbsPagination({
    totalPages: totalPage,
    visiblePages: visiblePageNum,
    onPageClick: function(event, page) {
      debugger;
      currentPage = page;
      $("#comment-list").empty();
      drawCommentCards(totalComments);
    }
  });
});


function drawCommentCards(datas) {
  //console.log("function drawCommentCards: currentpage: " + currentPage);
  //console.log("function drawCommentCards: Data: ");
  //console.log(datas);

  for (var i = (currentPage - 1) * NumPerPage; i < currentPage * NumPerPage; i++) {

    if (i < datas.length) {
      $("#comment-list").append(drawSingleCommentCard(datas[i], i));
    }
  }

  $(".star-show").rating({
    displayOnly: true
  });
}

function drawSingleCommentCard(data, index) {
  var html = '';
  if (typeof(data) != 'undefined') {
    html = html + '<div class="comment" number="' + index + '">' +
      '<li class="media">' +
      '<div class="media-left">' +
      '<a href="#">' +
      '<img class="media-object img-circle" style="height: 70px; width: 70px" src="' + data.author_avatar + '" alt="photo">' +
      '</a>' +
      '</div>' +

      '<div class="media-body">' +
      '<h4 class="media-heading inline">' + data.author_name + '</h4><span>  </span>' +

      '<div class="caption inline" ><span class="label label-success">' + data.user_rating + ' Stars</span></div>' +
      '<input value="' + data.user_rating + '" type="number" class="rating-loading star-show" min=0 max=5 step=0.1 data-size="xs">' +

      '<p class="inline">' + data.user_review + '</p><span>   </span>';

    if (data.userId == currentUserId) {
      html = html +
        '<a commentid= "' + data.commentId + '" class="inline" href="javascript:void(0)" onclick="removeByCommentId(this)">' +
        '<div class="caption inline" ><span class="label label-danger">Remove</span></div>' +
        '</a>';
    }

    html = html +
      '<p>' +
      '<div class="ds-comment-footer">' +
      '<span class="ds-time" title="' + data.time + '">' + data.time + '</span>&nbsp;' +
      '</div>' +
      '</p>' +
      '</div>' +
      '</li>' +
      '<hr/></div>';
  }

  return html;
}

<!-- Main Style Sheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.3/css/star-rating.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.1/jquery.twbsPagination.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.3/js/star-rating.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>

<div class="container">
  <div id="comment-list"></div>
  <nav aria-label="Page navigation">
    <ul class="pagination" id="pagination"></ul>
  </nav>
</div>

Answer 2

按以下顺序订购代码：

   var currentPage = 1;
    var totalPage = 5;
    var visiblePageNum = 2;
    var totalComments = {...}

   function drawCommentCards(datas) {
        console.log("function drawCommentCards: currentpage: " + currentPage);
        console.log("function drawCommentCards: Data: ");
        console.log(datas);

        for (var i = (currentPage - 1) * NumPerPage; i < currentPage * NumPerPage; i++) {

            if (i < datas.length) {
                $("#comment-list").append(drawSingleCommentCard(datas[i], i));
            }
        }


    }

    function drawSingleCommentCard(data, index){
        var html = '';
        if(typeof(data) != 'undefined'){
            html = html + '<div class="comment" number="'+ index +'">'+
               '<li class="media">' +
                    '<div class="media-left">' +
                        '<a href="#">' +
                            '<img class="media-object img-circle" style="height: 70px; width: 70px" src="'+ data.author_avatar +'" alt="photo">' +
                        '</a>' +
                    '</div>' +

                    '<div class="media-body">' +
                        '<h4 class="media-heading inline">'+ data.author_name +'</h4><span>  </span>' +

                        '<div class="caption inline" ><span class="label label-success">'+ data.user_rating +' Stars</span></div>' +
                        '<input value="'+ data.user_rating +'" type="number" class="rating-loading star-show" min=0 max=5 step=0.1 data-size="xs">' +

                        '<p class="inline">'+ data.user_review +'</p><span>   </span>';

            if (data.userId == currentUserId){
                html = html +
                        '<a commentid= "'+ data.commentId +'" class="inline" href="javascript:void(0)" onclick="removeByCommentId(this)">' +
                            '<div class="caption inline" ><span class="label label-danger">Remove</span></div>' +
                        '</a>';
            }

            html = html +
                        '<p>' +
                            '<div class="ds-comment-footer">' +
                                '<span class="ds-time" title="'+ data.time +'">'+ data.time +'</span>&nbsp;'+
                            '</div>'+
                        '</p>' +
                    '</div>' +
                '</li>' +
                '<hr/></div>';
        }

        return html;
    }

   $( document ).ready(function() {


    $('#pagination').twbsPagination({
    totalPages: totalPage,
    visiblePages: visiblePageNum,
    onPageClick: function (event, page) {
        currentPage = page;
        $("#comment-list").empty();
        drawCommentCards(totalComments);
        }
    });



    $(".star-show").rating({displayOnly: true});

});

</script >

我看不到在您创建的函数中调用document.ready的逻辑。函数声明自动悬挂在代码顶部

调用jQuery插件函数时，第一次调用成功，但是再次运行，调用失败

2 个答案: