Question

我无法将addThis按钮显示在bootstrap popover内部。代码在html数据属性中，并且addThis脚本正确触发，但即使通过检查器可以在其中看到代码，按钮也不会显示。

我在这里做了一个jsfiddle：

<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

Answer 2

我实现了您尝试成功的目标，但问题是共享按钮无法点击。有人联系了AddThis支持，这是他们得到的回复;

Unfortunately without seeing it in action I can't diagnose the problem. If the buttons are visible but not clickable then there's either something hijacking the click action or another transparent element z-indexed over it.

我通过在弹出窗口显示后加载AddThis按钮解决了这个问题。请参阅以下代码;

scroll = ScrollView.getScrollY();
    if(scroll<500){
                fab.setVisibility(View.GONE);
                fab1.setVisibility(View.GONE);
        }else{
                fab.setVisibility(View.VISIBLE);
                fab1.setVisibility(View.VISIBLE);
        }

在bootstrap popover中添加此共享按钮

2 个答案: