title: Bootstrap popover in a table generated with jQuery
body: <p>I am trying to build a table with JSON data I get with ajax.</p>
  
  <pre><code> $.getJSON('http://localhost:8000/list' , function(data) {
          var tbl_body = '&lt;div class="table-responsive"&gt;&lt;table class="table table-hover"&gt;&lt;tr&gt;&lt;th&gt;Description&lt;/th&gt;&lt;th&gt;Chez…&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;';
          $.each(data, function() {
              var d = this[1];
              var tbl_row = "&lt;td&gt;" + d['title'] + "&lt;/td&gt;";
              tbl_row += '&lt;td&gt;&lt;a href="#" data-html="true" data-toggle="popover" data-content="' + d['owner']['phone'] + '"&gt;' + d['owner']['name'] + '&lt;/a&gt;&lt;/td&gt;';
              tbl_body += "&lt;tr&gt;"+tbl_row+"&lt;/tr&gt;";
          });
          tbl_body += "&lt;/table&gt;&lt;/div&gt;";
          console.log(tbl_body);
          $("#liste").html(tbl_body).text();
      });
  </code></pre>
  
  <p>The JSON data looks like this:</p>
  
  <pre><code>[
    [
      0,
      {
        "title": "Why",
        "author": "How",
        "detailsUrl": null,
        "owner": {
          "name": "Ted",
          "email": "test@example.org",
          "phone": "098765645565"
        },
        "coverUrl": null,
        "history": [ 
        ]
      }
    ],
    [
      1,
      {
        "title": "Test",
        "author": "Test",
        "detailsUrl": null,
        "owner": {
          "name": "Fred",
          "email": "test@example.org",
          "phone": "98976567"
        },
        "coverUrl": null,
        "history": [
        ]
      }
    ]
  ]
  </code></pre>
  
  <p>But when I click the generated link in the table, nothing happens. I am sure that I am using bootstrap correctly because it works in a write plain HTML by hand. I guess that's an issue with escaping.</p>