1

嗨，我有一个应用程序，如果用户单击加载更多按钮，它将显示来自数据库的数据，但问题是一旦获取了所有数据，该按钮仍会显示，如果用户再次单击该按钮，则会重复相同的数据。这是代码，但我不确定问题出在哪里。

从json获取数据并加载到，按钮点击触发json获取数据事件

<ul class="module-list">                            

</ul>
<a class="btn-btn blue-blue more-wishlists" href="#" onclick="javascript:getRecentActivity(event)">
<span data-component-bound="true" class="loading-msg">See more recent activity</span>
</a>

Javascript

$(document).ready(function(){
getRecentActivity(null);
});

function getRecentActivity(event)
{
     if (event != null){
            disabledEventPreventDefault(event);
        }
    $.ajax({
        url:"<?=$this->baseUrl('activity/activityfeed')?>",
        data:{'total':totalRecordsView},
        dataType:"json",
        type:"POST",
        success:function(data){
            totalRecordsView = data['total_view'];

            data = data['result'];

            var activityHtml =  ''

            for(var i=0; i<data.length; i++){   
            activityHtml += '<li class="clearfix media-block review-block module-li" >'+
                '<div class="user-info-activity">'+
                    '<div class="photo-box pb-60s">'+
                        '<a href="#">';

            if(data[i]['img_url']){
                    activityHtml +='<img class="photo-img" alt="" height="60" src="'+data[i]['img_url'][0]['u_img']+'" width="60">';
                } else {
                    activityHtml +='<img class="photo-img" alt="" height="60" src="'+data[i]['review'][0]['u_img']+'" width="60">';
                }

            activityHtml +='</a></div></div>'+
                '<div class="media-story">'+
                    '<div class="feed-content">'+
                        '<div class="item-title clearfix">'+
                            '<div class="title-text">';

            if(data[i]['img_url']){
            activityHtml += '<a class="user-name"'+
                'href="user/'+data[i]['img_url'][0]['user_unique_name']+'" data-hovercard-id="">'+
                    ''+data[i]['img_url'][0]['name']+'</a> '+
                        ' added 1 photo for <a class="user-name" href="business/'+data[i]['img_url'][0]['business_name_url']+'">'+data[i]['img_url'][0]['business_name']+'</a></div>'+
                                '<div class="timestamp fine-print"><abbr class="timeago" '+
                    'title="'+getTime(data[i]['date_added'])+'">'+getTime(data[i]['date_added'])+'</abbr></div>'+
                    '</div></div>'+ 
                        '<div class="item-description">'+                           
                            '<ul class="photo-list large clearfix"><li>'+
                                '<div class="photo-info-box">'+
                    '<img src="../public/assest/business/biz_'+data[i]['img_url'][0]['photo_url']+'" alt="Photo of Community Lending Network" width="120" height="120">'+
                        '</div></li></ul>';

                } else {
                    if(data[i]['review'][0]['u_img_rating'] == 50){
                        var title = '5.0 star rating';
                    } else {
                        title = 'x star rating';
                        }
                            activityHtml += '<a class="user-name"'+
                                'href="user/'+data[i]['review'][0]['user_unique_name']+'" data-hovercard'+
                                    '-id="EObvJWZ_R5SFg7L1ePTpKA">'+data[i]['review'][0]['name']+'</a> '+
                                        ' reviewed '+
                    '<a class="biz-name" href="business/'+data[i]['review'][0]['business_name_url']+'" data-hovercard-id="t61v_1fZbpPa4cyST4Dy8g">'+
                            data[i]['review'][0]['business_name']+
                                '</a></div>'+

            '<div class="timestamp fine-print"><abbr class="timeago" '+
                'title="'+getTime(data[i]['date_added'])+'">'+getTime(data[i]['date_added'])+'</abbr></div></div></div>'+

                '<div class="item-description">'+
                    '<div class="rating">'+
                            '<i class="star-img stars_4" title="'+title+'">'+
                                '<img alt="'+title+'" class="" height="15"'+
                    'src="../public/images/star/stars_'+data[i]['review'][0]['u_img_rating']+'.gif"'+
                    'width="75"></i></div>'+

                '<p class="review-expandable" data-component-bound="true">'+
                '<span>'+data[i]['review'][0]['review_desc']+'</span></p>' +

'<div class="rateReview clearfix" id="'+data[i]['review_id']+'" data-component-bound="true">'+
                '<p class="review-intro review-message saving-msg" data-component-bound="true">Was this review ...?</p>'+
                '<ul data-component-bound="true" class="voteset'+data[i]['review_id']+'">'+
                    '<li class="useful ufc-btn" id="1">'+
                        '<a href=javascript:vote('+data[i]['review_id']+',"useful") rel="useful"><span>Useful</span></a>';

        if(data[i]['vote'][0]['useful'] == null){
            activityHtml +='<span></span>';
                } else {
                    activityHtml +='<span>('+data[i]['vote'][0]['useful']+')</span>';
                }

                    activityHtml +='</li>'+
                    '<li class="funny ufc-btn" id="2">'+
                        '<a href=javascript:vote('+data[i]['review_id']+',"funny") rel="funny"><span>Funny</span></a>';

        if(data[i]['vote'][0]['funny'] == null){
            activityHtml +='<span></span>';
                } else {
                        activityHtml +='<span>('+data[i]['vote'][0]['funny']+')</span>';
                    }

                    activityHtml +='</li>'+
                    '<li class="lame ufc-btn" id="3">'+
                        '<a href=javascript:vote('+data[i]['review_id']+',"lame") rel="lame"><span>Lame</span></a>';
                        if(data[i]['vote'][0]['lame'] == null){
                        activityHtml +='<span></span>';
                    } else {
                        activityHtml +='<span>('+data[i]['vote'][0]['lame']+')</span>';
                    }

                    activityHtml +='</li>'+
                '<span class="vote'+data[i]['review_id']+'"></span></ul>'+
                    '</div></div></div></div></li>';


                                        }

            }

            $('.module-list').append(activityHtml);

            if(totalRecords <= totalRecordsView){

                $('.btn-btn').text('Nothing beyond here ...');
                $('.btn-btn').removeAttr('onclick href');
            }
    }

    });

}

谢谢 ！！

4

1 回答 1

0

尝试通过检查子元素的数量来包装您的 getRecentActivity 函数：


if ($('.module-list').children().length === 0) {

    //existing getRecentActivity() code here

}

这应该可以工作，因为您的 AJAX 调用正在附加到.module-list ul元素，并且在调用成功完成一次后它不应再为空。

这里有更详细的解释：我如何计算孩子的数量？

另外，几点建议：


1) 在 jQuery 中，您可以通过在 $(document).ready() 块内设置事件处理程序来避免使用内联“onclick”属性，如下所示：


$(document).ready(function () 

    $('.more-wishlists').click(function (event) {  

        //put the contents of your "getRecentActivity" function here
        //and it will be called when an element with the class
        //"more-wishlists" is clicked

    });

});


2）考虑使用一个<button>元素而不是<a>你现在使用的：


  <button class="btn-btn blue-blue more-wishlists" type="button">
    See more recent activity
  </button>

从语义上讲，它可能更有意义，并且可能还会减少标记的数量。

于 2012-10-22T03:20:30.067 回答