在做新浪某个项目的时候，在ajax动态加载的时候，想增加分享功能，采用bshare插件。怎么办呢，看API？可是采用方法调用的时候，不是会重复绑定事件，就是会丢失事件，原因我想在于异步加载的原因。
后来联系客服，不断地调配，终于成功了。分享一下方法
function makeActives(activePage,activeClass)//theClassify为分类参数，在condition里面定义
{
//GET请求地址
var category=activeClass,
page=activePage,
size=5,
loadMoreApplyURL=‘/api/event/get_list/?category=‘+category+‘&size=‘+size+‘&page=‘+page;
arr1={"上海": "31","云南": "53","其他": "100","内蒙古": "15","北京": "11","台湾地区": "71","吉林": "22","四川": "51","天津": "12","宁夏": "64","安徽": "34","山东": "37","山西": "14","广东": "44","广西": "45","新疆": "65","江苏": "32","江西": "36","河北": "13","河南": "41","浙江": "33","海南": "46","海外": "400","湖北": "42","湖南": "43","澳门地区": "82","甘肃": "62","福建": "35","西藏": "54","贵州": "52","辽宁": "21","重庆": "50","陕西": "61","青海": "63","香港地区": "81","黑龙江": "23"},
arr2={‘高考‘:"1","国际学校":"2","留学":"3","中小学":"4","商学院":"5","外语":"6","其他":"7"},
arr3={‘线上‘:"1","线下":"2"}
$.ajax({
url: loadMoreApplyURL,
async: false,
type: ‘GET‘,
dataType: ‘jsonp‘,
success: function(data){
callbackFunction(data, activePage);
},
error: function(xhr,type){
//报错信息
alert("读取json失败");
}
});
function callbackFunction(json, activePage)
{
if(json.result.status.code=="0"){
var pageN=json.result.data["total_number"];
$(".scroll-data").attr("total-page",pageN);
if (creatPages==true) {
$("#subShowContent1_page").html("");
findPageNum(activeClass);
creatPages=false;
}
for(var i=0;i<5;i++)
{
var arr=[];
if (json.result.data.list[i]==undefined) {
break;
}
//标题 3月15日……
var title=json.result.data.list[i].title,
//标题的url
titleUrl = json.result.data.list[i].url,
//左侧
//图片地址
imgUrl = json.result.data.list[i].image,
//活动生成日期
creatTime = json.result.data.list[i].publish_time,
//分类信息
province = json.result.data.list[i].province,
provinceId = arr1[province],
category = json.result.data.list[i].category,
categoryId = arr2[category],
online = json.result.data.list[i].online,
onlineId = arr3[online],
//右侧
//活动概要前40个字符
summary = (json.result.data.list[i].summary.length > 40) ? (json.result.data.list[i].summary.substring(0,40) + ‘...‘) : json.result.data.list[i].summary,
//活动时间
activeTime = json.result.data.list[i].event_time,
//活动地点
activePlace = json.result.data.list[i].address,
//适合人群
activePerson = json.result.data.list[i].viewer,
//活动嘉宾
vip = json.result.data.list[i].guest,
//已经报名的人数
hasApplyNum = json.result.data.list[i].sign_num,
//未报名的人数
ApplyLeftNum = json.result.data.list[i].left_num,
//评论数
commentNum = json.result.data.list[i].commentNum,
//评论url
commentUrl = json.result.data.list[i].commentUrl,
//标题栏的时间
titleTime = json.result.data.list[i].event_date,
//id
activeId = json.result.data.list[i].id,
//是否报名
// btnObj.removeClass(‘btn-regis2 thisFloat‘).addClass(‘btn-regis-ed‘).text(‘已报名‘);
// btnObj2.removeClass(‘link-none‘);
isBaoMing = json.result.data.list[i].event_status,
user_event_sign = json.result.data.list[i].user_event_sign,
detailUrl = ‘http://events.edu.sina.com.cn/event/detail/‘+activeId;
arr.push(‘<li class="liPage‘+startBind+‘" data-title="‘+title+‘" data-url="‘+titleUrl+‘" data-summary="‘+summary+‘" data-pic="‘+imgUrl+‘"><h3 class="tit2"><em>‘+titleTime+‘</em>‘);
arr.push(‘<a href="‘+titleUrl+‘" class="title">‘+title+‘</a></h3>‘);
arr.push(‘<div class="cont1 clearfix"><a href="‘+titleUrl+‘" class="with-map2 left"><img src=‘+imgUrl);
arr.push(" ‘alt=‘‘></a><div class=‘infor1‘><p class=‘w1‘>"+"<span class=‘summary‘>"+summary+"</span>");
arr.push(‘<a href="‘+titleUrl+‘">[详细]</a></p>‘);
arr.push(‘<p class="msg2"><span class="contr">活动时间：</span><span>‘+activeTime+‘</span></p>‘);
arr.push(‘<p class="msg2"><span class="contr">活动地点：</span><span>‘+activePlace+‘</span></p>‘);
arr.push(‘<p class="msg2"><span class="contr">适合人群：</span><span>‘+activePerson+‘</span></p>‘);
arr.push(‘<p class="msg2"><span class="contr">活动嘉宾：</span><span>‘+vip);
arr.push(‘<a href="‘+titleUrl+‘#guests">更多</a></span></p>‘);
if (user_event_sign==1) {
arr.push(‘<div class="btn-wrap2"><a href="javascript:void(0);" class="btn2 btn-regis-ed jsBtnSignup" id="‘+activeId+‘">已报名</a>‘);
arr.push(‘<a href="javascript:void(0);" class="baomingCancel" style="margin-left: 15px;color: #008acb;">取消</a>‘);
}
if (user_event_sign==0){
if(isBaoMing==0){
arr.push(‘<div class="btn-wrap2"><a href="javascript:void(0);" class="btn2 btn-regis2 jsBtnSignup" id="‘+activeId+‘">立即报名</a>‘);
arr.push(‘<a href="javascript:void(0);" class="baomingCancel" style="display:none;margin-left: 15px;color: #008acb;">取消</a>‘);
}
if(isBaoMing==1){
arr.push(‘<div class="btn-wrap2"><a href="javascript:void(0);" class="btn2 btn-regis-ed jsBtnSignup" id="‘+activeId+‘">报名结束</a>‘);
}
if(isBaoMing==2 || isBaoMing==3){
arr.push(‘<div class="btn-wrap2"><a href="‘+detailUrl+‘" class="btn2 btn-regis-ed jsBtnSignup" id="‘+activeId+‘">查看详情</a>‘);
}
}
// 更改deatil套页面的时候，一处style="margin-left: 10px;"，两处style="font-size: 14px;"都分别加上
arr.push(‘<span class="msg3" style="margin-left: 10px;">已报<em style="font-size: 14px;">‘+hasApplyNum+‘</em>人</span>‘);
arr.push(‘<span class="msg3">还剩<em style="font-size: 14px;">‘+ApplyLeftNum+‘</em>个名额</span></div></div></div>‘);
// 更改结束
arr.push(‘<div class="msgshop clearfix"><p class="date-msg left">‘+creatTime+‘</p>‘);
arr.push(‘<dl class="msg4 left"><dt>分类：</dt>‘+‘<dd><a href="/event/search/?province=‘+provinceId+‘">‘+province+‘</a></dd>‘+‘<dd><a href="/event/search/?category=‘+categoryId+‘">‘+category+‘</a></dd>‘+‘<dd><a href="/event/search/?online=‘+onlineId+‘">‘+online+‘</a></dd>‘+‘</dl><div class="link1 right">‘);
// 更改detail套页面的时候，相应的地方加上 ，没评论的时候把括号和数字去了
if(commentNum=="0"){
arr.push(‘<div style="float:left;"><a href="‘+commentUrl+‘">评论 | </a>‘);
}
else{
arr.push(‘<div style="float:left;"><a href="‘+commentUrl+‘">评论(‘+commentNum+‘) | </a>‘);
}
arr.push(‘<span>分享</span></div><div class="button-share"><a title="分享到新浪微博" class="share-weibo" id="weibo‘+startBind+‘" href="javascript:void(0)" onclick="shareTo(this,‘+"‘sinaminiblog‘,"+startBind+‘)"></a><a title="分享到微信" class="weixin" id="weixin‘+startBind+‘" href="javascript:void(0)" onclick="shareTo(this,‘+"‘weixin‘,"+startBind+‘)"></a><a title="分享到QQ空间" class="qzone" id="qzone‘+startBind+‘" href="javascript:void(0)" onclick="shareTo(this,‘+"‘qzone‘,"+startBind+‘)"></a><a title="更多平台" class="share-more" id="more‘+startBind+‘" href="javascript:void(0)" onclick="shareTo(this,‘+"‘shareMore‘,"+startBind+‘)"></a></div>‘);
// 新更改
var html=arr.join(‘‘);
$(".main-active-list").append(html);
if ($(‘.jsBtnSignup‘).text()=="立即报名"){
$(‘.baomingCancel‘).show();
}
startBind+=1;
// 更改
}
}
}
}
重点在于这一段
arr.push(‘<span>分享</span></div><div class="button-share"><a title="分享到新浪微博" class="share-weibo" id="weibo‘+startBind+‘" href="javascript:void(0)" onclick="shareTo(this,‘+"‘sinaminiblog‘,"+startBind+‘)"></a><a title="分享到微信" class="weixin" id="weixin‘+startBind+‘" href="javascript:void(0)" onclick="shareTo(this,‘+"‘weixin‘,"+startBind+‘)"></a><a title="分享到QQ空间" class="qzone" id="qzone‘+startBind+‘" href="javascript:void(0)" onclick="shareTo(this,‘+"‘qzone‘,"+startBind+‘)"></a><a title="更多平台" class="share-more" id="more‘+startBind+‘" href="javascript:void(0)" onclick="shareTo(this,‘+"‘shareMore‘,"+startBind+‘)"></a></div>‘);
因为是动态加载到dom里面，因此会有些问题，解决方法如下：先放置一个占位的图片，给每一个动态加载的元素赋上一个独特的id，保证分享的内容准确，然后给一个onlick调用shareTo方法，传三个参数，分别是self，分享平台的短名，分享内容的编号。
function shareTo(event, shortName,startBind) {
//自定义设置内容，可动态获取当前页面内相应的参数进行传递
var jq=$("#weibo"+startBind),
title=jq.parents(".msgshop").siblings(".tit2").find("a").text(),
titleUrl=jq.parents(".msgshop").siblings(".tit2").find("a").attr("href"),
summary=jq.parents(".msgshop").siblings(".cont1").find(".summary").text(),
imgUrl=jq.parents(".msgshop").siblings(".cont1").find("img").attr("src");
//清除自定义分享内容的方法，在设置前清空，重新自定义内容
bShare.entries = [];
//添加自定义分享内容方法，不需要自定义的可以传递，bshare js会主动抓取页面相应值默认
bShare.addEntry({
title: title,
url: titleUrl,
summary: summary,
pic:imgUrl
});
if(bShare.isReady == true&& bShare.completed == true){
// alert("hello!");
}else{
bShare.isReady = false;
bShare.completed = false;
bShare.start();
}
//调用相应的分享方法，
if (shortName=="shareMore") {
bShare.more(event);
}
else{
bShare.share(event, shortName);
}
}
完美的解决分享的问题，这个方法在官方API上没有例子，得牢记
bshare分享插件的ajax应用
时间： 2024-10-24 01:12:30