Question

我有一个大的分页表。每行显示一个客户端及其信息。我使用AJAX调用来检查是否有客户注释。

如果客户有备注，则会添加图标。它被添加为一个内部html，它只是一个占位符，仅用于此通知图标。当悬停图标时，它会显示twitter bootstrap popover中的可用笔记。

除了换行符<br>或<br />实际上不会破坏该行但在弹出框中显示为常规文本时，它工作正常。这可能是因为它们是在页面加载后添加的，因为它一直适用于我的静态弹出窗口。

通过搜索，我发现html : true必须通过，但没有帮助。如何在动态添加弹出框的弹出窗口中获取html换行符？

该笔记的占位符具有以下标记：

<span class="notitieIndicatie" id="519de1b978b55"></span>

带有ajax加载的javascript看起来如下：

<script type="text/javascript" language="JavaScript">        
$(document).ready(function()
{        
    function getMessageAjax(uniqid)
    {
        var notes = "";
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data:
            {
                action: 'getNotes',
                uniqid: uniqid,
                cache: false
            },
            success: function(data)
            {
                if (data != 'NULL')
                {
                    var theValues = $.parseJSON(data);                        
                    $.each(theValues, function(key, value)
                    {
                        notes += '&bull;'+value['n_kort']+'<br>';
                    });                        
                    var popover = '<img src="images/icons/icon-info.gif" class="notepopover" data-content="'+notes+'" data-placement="bottom" data-original-title="" />';
                    $('#'+uniqid).html(popover);                        
                    $('body').popover({
                        selector: '.notepopover',
                        trigger: "hover",
                        html : true
                    });
                }
            }
        });
    }

    $('.notitieIndicatie').each(function(i, obj) {        
        getMessageAjax(this.id);
    });

});

Answer 1

解决方案是避免使用data-content，而是将html字符串作为content

中的值传递给popover调用

<script type="text/javascript" language="JavaScript">
$(document).ready(function()
{
    function getMessageAjax(uniqid)
    {
        var notes = "";
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data:
            {
                action: 'getNotes',
                uniqid: uniqid,
                cache: false
            },
            success: function(data)
            {
                if (data != 'NULL')
                {
                    var theValues = $.parseJSON(data);

                    var notesHTML = '<ul>';
                    $.each(theValues, function(key, value)
                    {
                        notesHTML += '<li>'+value['n_kort']+'</li>';
                    });
                    notesHTML += '</ul>';

                    var html = $('<img src="images/icons/icon-info.gif" class="notepopover" />');
                    $('#'+uniqid).append(html);

                    html.popover({
                        placement: "bottom",
                        trigger: "hover",
                        content: notesHTML,
                        html : true
                    });


                }
            }
        });
    }

    $('.notitieIndicatie').each(function(i, obj) {
        getMessageAjax(this.id);
    });

});

动态添加Twitter Bootstrap popover与<br/>不会破坏行

1 个答案: