[英]Share This buttons in Bootstrap Popover not clickable
I have a link which opens a popover, and in the popover I load content from a div. 我有一个打开popover的链接,在popover中我从div加载内容。 The content is some sharethis.com buttons and the javascript which is presented by sharethis to be added to the page.
内容是一些sharethis.com按钮和由sharethis呈现的javascript将添加到页面。
So the set up looks like this : 所以设置看起来像这样:
Button and content : 按钮和内容:
<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>
Popover init Popover init
$('#shareHead').popover({
title : "Share",
html : true,
content : function(){
return $('#share_this_btns').html();
},
placement : 'bottom'
});
The buttons turn up just fine and also show the count - however, they can't be clicked. 按钮变得很好并且还显示计数 - 但是,它们不能被点击。
I have also tried putting the script tags outside of the content div, and removing them completely (as there is a second instance of the sharethis script, but with a different publisher ID). 我还尝试将脚本标记放在内容div之外,并完全删除它们(因为sharethis脚本的第二个实例,但具有不同的发布者ID)。
Can you please advise? 你能给些建议么?
EDIT// It seems to work every now and then without me changing anything. 编辑//似乎每隔一段时间就会工作,而不会改变任何东西。 So the scripts seem to run, maybe it is an issue with how the elements are layered?
所以脚本似乎运行,也许这是元素如何分层的问题?
Ok I figured it out. 好吧我明白了。 I cannot just load sharethis data into the popover, so what I did is this : I added the normal tags provided by sharethis, and the reinitialised the buttons by calling stButtons.locateElements();
我不能只将这些数据加载到popover中,所以我做的是:我添加了sharethis提供的普通标签,并通过调用stButtons.locateElements()重新初始化按钮;
For that, I made a custom callback (courtesy of https://stackoverflow.com/a/14727204/1206437 ) where I call this init. 为此,我做了一个自定义回调(由https://stackoverflow.com/a/14727204/1206437提供 )我称之为init。 After that, however, the popover isn't positioned correctly because the width changes after the load.
但是,之后,弹出窗口未正确定位,因为宽度在加载后会发生变化。 So I also wrote a function that resizes everything.
所以我也编写了一个调整所有内容的函数。 It has to be in a setTimeout because locateElements() doesn't seem to have a callback, and so the width changes again after the numbers of tweets and shares are loaded.
它必须位于setTimeout中,因为locateElements()似乎没有回调,因此在加载推文和共享数量后宽度会再次变化。
The two sharethis scripts are already loaded in the header. 这两个共享脚本已经加载到标题中。
The final body code looks like this : 最终的正文代码如下所示:
Button that opens popover 打开popover的按钮
<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 使用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});
}
I wish there was a better solution than doing the setTimeout, but I couldn't find anything. 我希望有一个比做setTimeout更好的解决方案,但我找不到任何东西。
It doesn't look like you have linked the share buttons up to anything. 看起来您没有将共享按钮链接到任何内容。 Try wrapping each span pointing to a resource in an anchor tag eg:
尝试包装指向锚标记中的资源的每个跨度,例如:
<a href="https://www.facebook.com/YourPage"><span class='st_facebook_hcount margin-10' displayText='Facebook'></span></a>
Also, it doesn't actually matter where your Javascript goes, however you should put it all at the end of your document as it will make your page load faster. 此外,它实际上并不重要您的Javascript去往,但是您应该将它全部放在文档的末尾,因为它会使您的页面加载速度更快。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.