引導/ 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>標籤，