Question

我在表中实现bootstrap popover时遇到问题。这是我从网上获取的一个popover代码。

$('.main-attributes').popover({
    html: true,
    container: 'body',
    placement: 'auto top',
    trigger: 'manual',
    content: function () {

        var H = $('#div_scoreselector');

        return $(H).html();
    }
})
$('.manage-range').on('click', function (e) {
    var ma = $(this).parents('.main-attributes');
    $('.main-attributes').not(ma).popover('hide');
    $(ma).popover('toggle');
    var $this = $(this);
    $('.main-attributes').off('shown.bs.popover').on('shown.bs.popover', function () {
        $('.popover .save').data('context', $this);
    });
    e.stopPropagation();
});

$(document).on('click', '.save', function () {
    var $context = $(this).data('context');
    var fromval = $('.popover #fromvalue').val();
    var toval = $('.popover #tovalue').val();
    $context.siblings('.text-container').text('From: ' + fromval + ' To: ' + toval);
});

当我尝试将上面的代码用于简单的弹出功能时，它可以工作。例如：

    <div class='hidden' id='div_scoreselector'>
    <div>
        <h5>Are you sure?</h5>
        <div align="center">
            <button class="btn-dark-grey btn">OK</button>
            <button class="btn btn-red save">Cancel</button>
            <br/>
        </div>
      </div>
</div>


    <div class='main-attributes'>
          <img id='reset' value='reset' src='/img/some_icon.png' width='30' height='30' key='key' class='manage-range' />
    </div>

然而，当我尝试使用该代码时，作为ajax的表响应，没有任何反应。我可以看到图标，但点击它时没有任何反应。目前，我只是希望打开popover窗口。之后，我将实现其余的代码。任何人都知道为什么它没有打开（我位于retTable内的图标）。

function get_af_status() {
    var ex = document.getElementById('status_table');
    if (  $.fn.DataTable.fnIsDataTable( ex ) ) {
         var oTable = $('#status_table').dataTable()
         oTable.fnClearTable();
         oTable.fnDraw()
         oTable.fnDestroy();
    }

    $.ajax(
        {
            url : '/status',
            type: "GET",
            success:function(data, textStatus, jqXHR)
            {
                theRows = extract_status_data(data)
                $("#status_table tbody").html(theRows)
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
                alert('error')
            }
        });
    }

function extract_status_data(jsonDataRaw){
    jsonResultSect = jsonDataRaw['result']
    retTable = ""
    retText = "ret text <br/>"
    for( key in jsonResultSect){
        stat = jsonResultSect[key]
        a = stat['a']
        b = stat['b']
        c = stat['c']
        d = stat['d']
        e = stat['e']

        retTable += "<tr><td><div class='main-attributes'><img id='reset_" + key + "' value='reset' src='/img/some_icon.png' width='30' height='30' key='key' class='manage-range' /></div></td><td>" + key +  "</td><td>" + a + "</td><td>" + b + "</td><td>" + c + "</td><td>" + d + "</td><td>" + e + "</td></tr>"

}
    return retTable
}

请告知。

Answer 1

很可能它已经在桌子内部打开了。在浏览器中检查代码以查看它是否打开，并可能更改单元格的溢出样式。

在桌子里面的Bootstrap Popover

1 个答案: