Bootstrap/HTML 个元素到弹出窗口 data-content="" 部分

Question

我的 index.PHP 页面头部有以下代码..

<script>
$(function(){
    $('[data-toggle=popover]').popover()
    /*.click(function(e) { 
        e.preventDefault(); 
    });*/
});
</script>

下面这个..

        echo "<td>
        <button type=\"button\" 
        class=\"btn btn-default\" 
        data-html=\"true\" 
        data-container=\"body\" 
        data-toggle=\"popover\" 
        data-trigger=\"focus\" 
        data-placement=\"top\" 
        data-content=\"
        <div class=\"media\">
                <div class=\"media-left\">
                    <a href=\"...\">
                        <img class=\"media-object\" src=\"...\" alt=\"...\">
                    </a>
                </div>
                <div class=\"media-body\">
                    <h4 class=\"media-heading\">Media heading</h4>
                    ...
                </div>
        </div>\"
        ".$userFirstName."</button>";

        echo 
        "<script>
        $(function(){
            $(\"[data-toggle=popover]\").popover();
        });
        </script></td>";

我想弄清楚为什么 data-content="" 部分中的内容现在进入了按钮，而不是留在 bootstrap 弹出窗口的 "pop-up part" 中。如果可能的话，我想将一些信息添加到将从 mysql 数据库和其他一些 formatting/HTML/bootstrap 中提取的 popver 中。

我是 Jquery/javascript/popovers 的新手。我的理解是数据-html="true" 允许 html 进入弹出窗口，所以我在想这可能与它不是基本 HTML 而是 Bootstrap 这一事实有关？一切正常，直到我尝试将 bootstrap 'media' 东西放在那里。

感谢任何帮助，非常感谢！

Answer 1

不能用双引号将内容用更多的双引号括起来。在这种情况下

data-content=\"
        <div class=\"media\">

被浏览器解释为：

data-content="<div class=" media">

因为浏览器无法识别 "inner" 双引号不只是关闭第一个双引号。有多种选择：用 " 替换内部 "，用 ' 替换它们，或者改变你的方法并使用 JSON。

在这种情况下，您可以使用快速而肮脏的方法：

<td>
        <button type=\"button\" 
        class=\"btn btn-default\" 
        data-html=\"true\" 
        data-container=\"body\" 
        data-toggle=\"popover\" 
        data-trigger=\"focus\" 
        data-placement=\"top\" 
        data-content=\"
        <div class='media'>
                <div class='media-left'>
                    <a href='...'>
                        <img class='media-object' src='...' alt='...'>
                    </a>
                </div>
                <div class='media-body'>
                    <h4 class='media-heading'>Media heading</h4>
                    ...
                </div>
        </div>\"
        >".$userFirstName."</button>";

此外，小提示：您需要在开始 <button> 标签上结束 >，

Bootstrap/HTML 个元素到弹出窗口 data-content="" 部分

Bootstrap/HTML elements into a popover data-content="" section

javascript

jquery

html

css

popover