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

Question

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

我的场景需要在分页插件的onclick方法中调用。当用户点击不同的页码时，评论区域被重新绘制。然而奇怪的是，当页面第一次加载时，绘制星级的方法被调用成功。

但是点击页码的时候，页面报错，说“未捕获的类型错误:$(...).rating 不是一个函数”；但我敢肯定，在初始阶段和点击阶段，它都会调用 onPageClick 中的代码。我看了一下控制台，发现我第一次初始化的时候，在$('.star-show')的prototype里面有一个rating方法，但是当我调用onPageClick的时候，检查对象$('.star-show' '), 原型(prototype)中没有评级方法。 照片 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() block 中运行您的代码，并确保您在下一页上有一个带有 .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>