Question

我在bootstrap popover中添加linkedin share按钮时遇到问题。在弹出窗口内，单击按钮时没有任何反应在弹出窗口中按钮效果非常好。

我该如何解决？

这是HTML

  <a data-placement="top" data-toggle="popover" class="linkshare" data-container="body" type="button" data-html="true" href="#" id="compartilhar">Compartilhar</a>

  <div id="popover-content" class="hide">
    <script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: pt_BR</script>
    <script type="IN/Share" data-url="mydynamicurl"></script>
  </div>

和Jquery

  $("[data-toggle=popover]").popover({
    html: true,
    content: function() {
            return $('#popover-content').html();
          }
  });

这是一个例子： https://codepen.io/anon/pen/gmVLyR

由于

Answer 1

您的代码无效，因为当您将HTML分配给#popover-content时，浏览器会认为您正在调用已加载的脚本：<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>。在浏览器的控制台上查找以下警告：

重复加载in.js，所有参数都将被忽略

检出my version的jsFiddle以查看可能的解决方法，或者请参见以下代码：

    <!-- Forget about this:
    <script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
    <script type="IN/Share" data-url="mydynamic_url"></script>
    -->        
    <!-- Simplify: -->
    <div class="share">
      <a data-placement="top" data-toggle="popover" class="linkshare" data-container="body" type="button" data-html="true" href="#" id="share">Share</a>
    </div>
    <!--/share-->
<script>
$("[data-toggle=popover]").popover({
            html: true,
            content: `<div id="popover-content">
                         <div class="row">
                            <div class="col-md-6">
                                test
                            </div>
                            <div class="col-md-6">
                                <script src="//platform.linkedin.com/in.js" type="text/javascript"><\/script>
                                <script type="IN/Share" data-url="mydynamic_url"><\/script>
                            </div>
                        </div>
                    </div>`
        });
</script>

请确认您的问题是否已解决。干杯！

在bootstrap popover内共享按钮

1 个答案: