如何将sharethis与Ajax结合使用

Question

每一次成功的http请求后，我都会在新按钮中大显身手。

//Remove events and items
$('#sthoverbuttons-chicklets span').remove();

然后，我通过将一个对象传递到stwidget来添加带有新事件的新项。

请参阅此处的sharethis文档：http://support.sharethis.com/customer/portal/articles/475079-share-properties-and-sharing-custom-information#Dynamic_Specification_through_JavaScript

//Finish with share buttons
wyrAjax.sharethis.finishAddingShareButton();

wyrAjax.sharethis = {
//Grab the current share height so we can keep it this height when we remove all the items
    shareThisHeight:null,
    init:function () {

        //If the height has not been set set it
        if(wyrAjax.sharethis.shareThisHeight===null){
            wyrAjax.sharethis.shareThisHeight = $('#sthoverbuttons').outerHeight();
        }

        //Set up elements so that we can use them as ID's
        $('.sthoverbuttons-chicklets').attr('id', 'sthoverbuttons-chicklets');
        if (!$('#shareLoading').length) {
            $('#sthoverbuttonsMain').append('<div id="shareLoading"><img src="/img/loading.gif" style="position: absolute; top: 50%;left: 37%"></div>');
        }
    },
    shareTypes:function(){
        var array = [];
        array[0]={
            "service":"facebook"
        };
        array[1]={
            "service":"twitter"
        };
        array[2]={
            "service":"delicious"
        };
        array[3]={
            "service":"googleplus"
        };
        array[4]={
            "service":"reddit"
        };
        array[5]={
            "service":"tumblr"
        };
        array[6]={
            "service":"stumbleupon"
        };
        array[7]={
            "service":"digg"
        };
        array[8]={
            "service":"sharethis"
        };
        return array;
    },
    startGettingShareButton:function () {
        //First we run a quick check to see if the elemnts have ID's
        wyrAjax.sharethis.init();

        //Now lets fade out and clean up all the shares so we can add new shares in.
        $('#sthoverbuttons-chicklets').hide();

        $('#sthoverbuttonsMain').height(wyrAjax.sharethis.shareThisHeight);
        wyrAjax.sharethis.addLoadingToShare();
    },
    addLoadingToShare:function () {
        $('#shareLoading').show();
        $('#sthoverbuttons-chicklets span').off().remove();
    },
    finishAddingShareButton:function () {
        $('#shareLoading').hide();
        var shareItems = wyrAjax.sharethis.shareTypes();
        $.each(shareItems,function(key, value){
            wyrAjax.sharethis.addShareThisButton(value);
        });
        $('.sthoverbuttons-chicklets').show();
    },
    addShareThisButton:function (object) {
        stWidget.addEntry({
            "service":object.service,
            "element":document.getElementById('sthoverbuttons-chicklets'),
            "url":"http://www.wouldyourathers.co.uk/question/" + wyrAjax.questionDetails.id,
            "title":"Would You Rather | " + wyrAjax.questionDetails.q1,
            "type":"large",
            "text":"Would You Rather " + wyrAjax.questionDetails.q1 + " or " + wyrAjax.questionDetails.q2,
            "summary":wyrAjax.questionDetails.q1 + " or " + wyrAjax.questionDetails.q2
        });
    }
};

当我点击其中一个新添加的按钮时，它将转到例如twitter的分享功能，但由于某种原因，它也会显示Facebook的分享。

我想在重新添加之前，我想删除跨度上的所有事件。

Answer 1

所以我遇到的问题是sharethis不想让你删除共享项目。Sharethis stWidget.addEntry不想让你添加新的dom项目，它想让你替换页面上已经存在的共享按钮。

考虑到这一点，我编辑了我的代码，将ID添加到已经共享的所有按钮中：

 //Give all share buttons ID's
 var shareItems = wyrAjax.sharethis.shareTypes();
 $.each(shareItems,function(key, value){
   $('.st_'+value.service+'_large').attr('id','st_'+value.service+'_large');
 });

然后，我使用Sharethis的addEntry替换了现有的按钮。

wyrAjax.sharethis = {
    //Grab the current share height so we can keep it this height when we remove all the items
    shareThisHeight:null,
    init:function () {

        //If the height has not been set set it
        if(wyrAjax.sharethis.shareThisHeight===null){
            wyrAjax.sharethis.shareThisHeight = $('#sthoverbuttons').outerHeight();
        }

        //Set up elements so that we can use them as ID's
        $('.sthoverbuttons-chicklets').attr('id', 'sthoverbuttons-chicklets');
        if (!$('#shareLoading').length) {

            //Give all share buttons ID's
            var shareItems = wyrAjax.sharethis.shareTypes();
            $.each(shareItems,function(key, value){
                $('.st_'+value.service+'_large').attr('id','st_'+value.service+'_large');
            });

            $('#sthoverbuttonsMain').append('<div id="shareLoading"><img src="/img/loading.gif" style="position: absolute; top: 50%;left: 37%"></div>');
        }
    },
    shareTypes:function(){
        var array = [];
        array[0]={
            "service":"facebook"
        };
        array[1]={
            "service":"twitter"
        };
        array[2]={
            "service":"delicious"
        };
        array[3]={
            "service":"googleplus"
        };
        array[4]={
            "service":"reddit"
        };
        array[5]={
            "service":"tumblr"
        };
        array[6]={
            "service":"stumbleupon"
        };
        array[7]={
            "service":"digg"
        };
        array[8]={
            "service":"sharethis"
        };
        return array;
    },
    startGettingShareButton:function () {
        //First we run a quick check to see if the elemnts have ID's
        wyrAjax.sharethis.init();

        //Now lets fade out and clean up all the shares so we can add new shares in.
        $('#sthoverbuttons-chicklets').hide();

        $('#sthoverbuttonsMain').height(wyrAjax.sharethis.shareThisHeight);
        wyrAjax.sharethis.addLoadingToShare();
    },
    addLoadingToShare:function () {
        $('#shareLoading').show();
    },
    finishAddingShareButton:function () {
        //Remove the loading.gif
        $('#shareLoading').hide();

        //grab array of different share types
        var shareItems = wyrAjax.sharethis.shareTypes();

        //Loop through 
        $.each(shareItems,function(key, value){
            wyrAjax.sharethis.addShareThisButton(value);
            $('#st_'+value.service+'_large > span:first-child').remove();
        });
        $('.sthoverbuttons-chicklets').show();
    },
    addShareThisButton:function (object) {
        stWidget.addEntry({
            "service":object.service,
            "element":document.getElementById('st_'+object.service+'_large'),
            "url":"http://www.wouldyourathers.co.uk/question/" + wyrAjax.questionDetails.id,
            "title":"Would You Rather | " + wyrAjax.questionDetails.q1,
            "type":"large",
            "text":"Would You Rather " + wyrAjax.questionDetails.q1 + " or " + wyrAjax.questionDetails.q2,
            "summary":wyrAjax.questionDetails.q1 + " or " + wyrAjax.questionDetails.q2
        });
    }
};

希望有人能发现这一点有帮助。