添加内容时引导弹出框错位答案

【问题标题】：bootstrap popover misplacement when adding content添加内容时引导弹出框错位
【发布时间】：2015-11-25 23:50:29
【问题描述】：

我正在尝试编写功能，当您单击按钮时，textarea 将添加到我的弹出框内容的底部。问题是当显示文本区域时，弹出框向下延伸并隐藏文本。我希望弹出框只向上延伸（保存底部位置和原始宽度）帮忙？

这是我的代码：

html:

<div class="popover-markup">
  <a href="#" class="trigger">
    This link triggers the popover.
  </a>
  <span class="content hide">
    <p>This is the popover content.
    </p>
      <button id="clickme" onclick="showText()">click me</button>
      <textarea class="textarea"></textarea>
  </span>
</div>

js:

$(document).ready(function () {
    $('.popover-markup > .trigger').popover({
        html: true,
        title: function () {
            return $(this).parent().find('.head').html();
        },
        content: function () {
            return $(this).parent().find('.content').html();
        },
        container: 'body',
        placement: 'top',
        html: true
    });

    $('.textarea').hide();


});
function showText() {
    $('.textarea').show();
};

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

我做了一个令人讨厌的 hack，内容被及时替换，以便弹出框在再次调用时计算出新的正确位置。

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>
        .container {
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <button id="my-show-popover" type="button" class="btn btn-default" data-container=".container" data-toggle="popover"
                data-placement="top" data-html="true" data-trigger="manual">
            Popover on top
        </button>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            var popoverNoTextAreaContent = "Nasty hobbitses. <button type='button' id='my-show-text-area-button' class='btn btn-default'>Click</button>",
                popoverWithTextAreaContent = popoverNoTextAreaContent + "<textarea></textarea>";
            $('#my-show-popover').click(function () {
                $(this).attr('data-content', popoverNoTextAreaContent).popover('show');
            });
            $(document).on('click', '#my-show-text-area-button', function () {
                $('#my-show-popover').attr('data-content', popoverWithTextAreaContent).popover('show');
            });
        });
    </script>
</body>

【讨论】：