将引导/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="" 部分中的内容现在进入了按钮，而不是停留在引导弹出窗口的“弹出部分”中。如果可能，我想将一些信息添加到将从 mysql 数据库和其他一些格式/HTML/引导程序中提取的信息。

我是 Jquery/javascript/popovers 的新手。我的理解是 data-html="true" 允许 html 进入弹出框，所以我认为它可能与它不是的事实有关t 基本的 HTML 和 Bootstrap？在我尝试将引导“媒体”的东西放在那里之前，一切都很好。

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

Answer 1

你不能用双引号包裹更多双引号的内容。在这种情况下

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

被浏览器解释为：

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

因为浏览器无法识别“内部”双引号不仅仅是关闭第一个双引号。有许多选项：用" 替换内部"，用' 替换它们，或者改变你的方法并使用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> 标记上添加结束 >，