嗨，我有一个应用程序，如果用户点击加载更多按钮，它将显示来自数据库的数据，但问题是，一旦获取所有数据，按钮仍然显示，如果用户再次单击该按钮，相同的数据是重复。这是代码，但我不确定问题出在哪里。
从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');
}
}
});
}
谢谢！
答案 0 :(得分：0)
尝试包装你的getRecentActivity函数，并检查子元素的数量：
if ($('.module-list').children().length === 0) {
//existing getRecentActivity() code here
}
这应该有效，因为您的AJAX调用附加到.module-list ul元素，并且在调用成功完成一次后它不应再为空。
此处有更详细的解释：How can I count the number of children?
另外，一些建议：
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>
从语义上讲，它可能会更有意义，也可能会减少标记量。