在Bootstrap Popover中共享此按钮不可单击

Question

我有一个打开弹出窗口的链接，在弹出程序中，我从div加载内容。内容是一些sharethis.com按钮和javascript，由sharethis提供，将其添加到页面中。

所以这个设置看起来是这样的：

按钮和内容：

<a href="#share" class="btn btn-white opaque30 btn-large marginR10" id="shareHead"><i class="fa fa-share"></i> Share</a>

<div id="share_this_btns" class="hidden">
    <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
    <script type="text/javascript">stLight.options({publisher: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
    <div class="margin-10"><span class='st_facebook_hcount margin-10' displayText='Facebook'></span></div>
    <div class="margin-10"><span class='st_twitter_hcount margin-10' displayText='Tweet'></span></div>
    <span class='st_pinterest_hcount' displayText='Pinterest'></span>
</div>

爆米花

$('#shareHead').popover({
    title   : "Share",
    html    : true,
    content : function(){
        return $('#share_this_btns').html();
    },
    placement : 'bottom'
});

这些按钮可以很好地显示计数--但是，它们不能被点击。

我还尝试将脚本标记放在content之外，并将它们完全删除(因为sharethis脚本有第二个实例，但具有不同的publisher ID)。

你能告诉我吗？

编辑//它似乎不时地工作，而我没有改变任何东西。所以脚本似乎在运行，也许这是一个元素分层的问题吗？

Answer 1

好吧我想明白了。我不能只是将sharethis数据加载到弹出程序中，所以我所做的是:我添加了sharethis提供的普通标记，并通过调用stButtons.locateElements()重新初始化了按钮；

为此，我做了一个自定义回调(由https://stackoverflow.com/a/14727204/1206437提供)，我称之为init。但是，在此之后，由于加载后宽度发生了变化，弹出器的位置不正确。所以我还写了一个函数来调整所有的大小。它必须在setTimeout中，因为locateElements()似乎没有回调，所以在加载了tweet和共享的数量之后，宽度又发生了变化。

这两个sharethis脚本已经加载在标题中。

最后的身体代码如下所示：

打开弹出窗口的按钮

<div id="btnParent_head">
    <button class="btn btn-white opaque30 btn-large marginR10" id="shareHead"><i class="fa fa-share"></i> Share</button>
    <a href="#pledge" class="btn btn-main scroll"><i class="fa fa-thumbs-o-up"></i> Pledge</a>
    <button href="#contact" id="contactHead" data-fancybox-href="#contactBox" class="btn btn-white opaque30 btn-large marginL10"><i class="fa fa-envelope"></i> Contact</button>
</div>

Javascript/JQuery

$(document).load(function(){
    $('#shareHead').popover({
            title   : "Share",
        html    : true,
        content : function(){
            var text = '';
            text += '<div class="margin-10"><span class="st_facebook_hcount margin-10" displayText="Facebook"></span></div>';
                text += "<div class='margin-10'><span class='st_twitter_hcount margin-10' displayText='Tweet'></span></div>";
            text += "<span class='st_pinterest_hcount' displayText='Pinterest'></span>";
             return text;
            },
            placement : 'bottom',
        callback : function(){
                 reloadStBtns(resizePopover,$('#btnParent_head     .popover'),$('#shareHead'));
        }
    });
});

var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
      tmp.call(this);
      if (this.options.callback) {
        this.options.callback();
      }
}

function reloadStBtns(callback,popover,parent) {
    stButtons.locateElements();
    setTimeout(function(){
        callback(popover,parent);
    },500);
}
function resizePopover(popover, parent) {
    var i_width = parent.outerWidth();
    var i_swidth = popover.outerWidth();
    var i_nleft = (i_width - i_swidth)/2
    popover.css({'left':i_nleft});
}

我希望有一个比做setTimeout更好的解决方案，但我什么也找不到。

Answer 2

看起来你并没有把分享按钮链接到任何东西上。尝试包装每个跨度，指向锚标记中的资源，例如：

<a href="https://www.facebook.com/YourPage"><span class='st_facebook_hcount margin-10' displayText='Facebook'></span></a>

而且，实际上，Javascript的去向并不重要，但是您应该将其全部放在文档的末尾，因为它将使页面加载速度更快。