在bootstrap popover内共享按钮

Question

我在bootstrap popover中添加linkedin share按钮时遇到问题。在popover内部，没有任何反应当我点击按钮弹出按钮时按钮效果很好。

我该如何解决？

这是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，将忽略任何参数

查看您的jsFiddle的my version以查看可能的解决方法，或者查看以下代码：

    <!-- 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>

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