引导/ HTML元素成酥料饼的数据内容=“”部分

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

我是新来jquery/javascript/popovers ..这是我的理解data-html =“true”允许html进入popover，所以我认为它可能与它不是事实有关基本的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>标签，