bshare分享插件的ajax应用
在做新浪某个项目的时候，在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上没有例子，得牢记