sharethis on twitter bootstrap modal

Question

I wanted to show the share-this widget on a twitter bootstrap modal, however the code says to do the following:

<span class='st_facebook_hcount' displayText='Facebook'></span>
<span  class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_plusone_hcount' displayText='Google +1'></span>
<span  class='st_email_hcount' displayText='Email'></span>

so what I did is that on bootstrap's shown.bs.modal event I have:

var switchTo5x=true;
    $.getScript("http://w.sharethis.com/button/buttons.js", function(){
        stLight.options({publisher: "c68c8f6c-c670-419b-b8e2-23772e22a861", doNotHash: false, doNotCopy: false, hashAddressBar: false, popup: 'true'});

    });

however the next time I open a different modal, then this share button doesn't load. I assume it's because the getScript is already there?

Answer 1

Try this after opening new modals:

stButtons.locateElements();

It will look for the new buttons and it will instantiate them.

Edit: Listen to the show.bs.modal event to handle it :

$('#myModal').on('show.bs.modal', function () {
  stButtons.locateElements();
})

Edit2: Ok after reading your comment I think that the final solution is:

var switchTo5x=true;
    $.getScript("http://w.sharethis.com/button/buttons.js", function(){
        stLight.options({publisher: "c68c8f6c-c670-419b-b8e2-23772e22a861", doNotHash: false, doNotCopy: false, hashAddressBar: false, popup: 'true'});
        stButtons.locateElements();
    });