Question

我正在尝试使用Bootstrap popovers来处理动态内容。我有一个jQuery AJAX请求，返回一些数据行。 AJAX成功函数将循环并从检索到的数据生成HTML代码。生成的HTML中包含Bootstrap代码，但它不起作用。如果我只是正常编写HTML代码，它可以正常工作。

这是我正在尝试做的一个例子。 newRowReg只循环遍历检索到的每个记录并将其附加到HTML字符串。

newRowReg += "<tr>";
newRowReg += "<td>" + xStatus + "</td>";
newRowReg += "<td><img src='green dotx.jpg' class='ppt1' data-container='body' data-toggle='popover' data-placement='right' data-content='Vivamus sagittis lacus vel augue laoreet rutrum faucibus.'>";
newRowReg += "</tr>";
$("#regTbl").append(newRowReg);

弹出窗口的Javascript代码。

$('.ppt1').popover({
    title: 'Title 1',
    trigger: 'hover',
    content: 'Some Content!'
  });

如果像这样动态生成它，我怎么能让它工作？

Answer 1

让我们有这样的链接

<a href="#" id="show_media" class="btn btn-small btn-info" 
                            rel="popover" 
                            value="{{ $value->id }}"
                            data-content="<div id='div{{ $value->id }}'></div><script>loadMedia({{ $value->id }})</script>" 
                            data-original-title="My Title">Show Media</a>

然后在身体结束之前

  <script>  
    $(function (){ 
        $("#show_media").popover({placement: 'top', html: true});
    }); 
    function loadMedia(adsId){
        console.log("Ads ID: " +adsId);
        $('div#div' + adsId).html('xxxx');
    } 
    </script>

具有动态内容的Twitter Bootstrap Popover

1 个答案: