javascript - 在引导弹出窗口中添加此共享按钮

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();
                }

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

<强> FIDDLE