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 popover的“弹出部分”中。我想在popver中添加一些信息，如果可能的话，这些信息将从mysql数据库和其他一些格式化/ HTML / bootstrap中提取出来。

我是Jquery / javascript / popovers的新手..我的理解是data-html =“true”允许html进入popover，所以我认为它可能与它不是事实有关基本的HTML和Bootstrap？一切正常，直到我试图把引导“媒体”的东西放在那里。

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

Answer 1

您不能使用双引号包装更多双引号的内容。在这种情况下

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

浏览器将其解释为：

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

因为浏览器无法识别＆＃34;内部＆＃34;双引号并不仅仅是关闭第一个双引号。有许多选项：将内部"替换为"，将其替换为'或更改您的方法并使用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元素到popover data-content =“”部分

1 个答案: