在引導彈出窗口中添加此共享按鈕

Question

我無法讓addThis按鈕顯示在引導程序彈出窗口內。 該代碼位於html數據屬性中，並且addThis腳本可以正確觸發，但是即使可以通過檢查器看到該代碼，按鈕也不會顯示。

我在這里做了一個jsfiddle：

http://jsfiddle.net/XW9bk/1/

<li id="share" class="text-primary" data-html="true" data-content="<div class='addthis_toolbox addthis_default_style addthis_32x32_style'><a class='addthis_button_preferred_1'></a><a class='addthis_button_preferred_2'></a><a class='addthis_button_preferred_3'></a><a class='addthis_button_preferred_4'></a><a class='addthis_button_compact'></a><a class='addthis_counter addthis_bubble_style'></a></div>" data-original-title="" data-trigger="manual" data-placement="right"><a class="text-success">Share</a></li>

$('#share').click(function() {
    $('.vote, .favorite, #share').popover('hide');
    $('#share').popover('toggle');
})

$(document).ready(function() {
    var addthis_config = {"data_track_addressbar": true};
    $.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=imperium2335")
})

---

我用以下方式工作：

$('#share').click(function() {
    $('.vote, .favorite').popover('hide');
    $('#share').popover('toggle');
    addthis.toolbox('.addthis_toolbox');
})

現在的問題是，在彈出窗口中顯示按鈕之前要延遲幾秒鍾。 當彈出窗口被隱藏然后重新打開時，按鈕不在那里，並且再次需要一段時間才能出現。

有人知道是什么原因造成的嗎？

Answer 1

腳本加載似乎是一個時間問題，同時它實際上是動態內容。 這將適合您的情況：

HTML

<div class="hidden">
    <div class="the-content"></div>
</div>
<br />
<br />

JAVASCRIPT

$(document).ready(function () {
    var addthis_config = {
        "data_track_addressbar": true
    };

    var theCode = '<div class="addthis_toolbox addthis_default_style addthis_32x32_style"><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a></div>';

    var theButton = '<button type="button" class="btn btn-default" data-container="body" data-placement="right" rel="popover">Popover on right</button>';

    $('.the-content').append(theCode).promise().done(function () {
        $.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=imperium2335", function () {
            setTimeout(function() { $('body').append(theButton); }, 1000);
            $('body').popover({
                selector: '[rel=popover]',
                html: true,
                content: function () {
                    return $('.the-content').html();
                }

            });
        });
    });
});

小提琴

Answer 2

我實現了您嘗試成功完成的任務，但是問題在於共享按鈕不可單擊。 有人聯系了AddThis支持，這是他們得到的答復；

不幸的是，如果沒有實際應用，我將無法診斷問題。 如果按鈕可見但不可單擊，則可能是某些東西劫持了click動作，或在其上進行了z索引的另一個透明元素。

我通過顯示彈出窗口后加載AddThis按鈕解決了這個問題。 參見下面的代碼；

<button type="button" class="btn btn-artist-add-share has-popover" rel="popover" data-placement="bottom" data-html="true" data-content="<div id='pcontent'></div>">Share <i class="fa fa-share padding-left-20"></i>
</button>

<script language="JavaScript">
  $("[rel=popover]").popover({
    html: true
  });

  $("[rel=popover]").on('shown.bs.popover', function() {
    $('#pcontent').html("<div class='addthis_sharing_toolbox'></div>")
    $.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4fa624772af11b1b")
  });
</script>