Bootstrap 在数据表 js 中使用转义符号时工具提示上的徽章功能错误

Question

我使用下面的代码

var table = $('#example').DataTable({
    responsive: true,
    "createdRow": function( row, data, dataIndex ) {
        var te='something';    
    var heart='"<div><span class=\"badge badge-pill badge-success\"><i class=\"far fa-heart\"></i></span></div>"';
    var td1='<button type="button" class="btn btn-default" data-toggle="tooltip"  data-placement="top" data-html="true"  title='+heart+'><div class="far fa-thumbs-up>'+te+'</div></button>';
    $('td:eq(1)',row).html(td1);


    var td2='<button type="button" class="btn btn-default" data-toggle="tooltip"  data-placement="top" data-html="true"  title="12345"><div class="far fa-thumbs-up">'+te+'</div></button>';
    $('td:eq(2)',row).html(td2);
    }
});

我使用或不使用 EscapeFormat 符号，都在 <div><sapn class= >

中得到相同的工具提示代码中断

https://jsfiddle.net/housekeepings/v8x9wn03/26/

我该如何解决这个错误~叫人帮我！谢谢~

Answer 1

像这样构建 "DOM strings" 时需要格外小心。更正错误：

删除引号冗余（"" inside '' 其中包含更多 ""）
在需要的地方使用 " 而不是 \"，即 class="far fa-heart"
在 fa-thumbs-up
引用标题，即 title="'+heart+'"

→

var heart='<div><span class=&quot;badge badge-pill badge-success&quot;><i class=&quot;far fa-heart&quot;></i></span></div>';
var td1='<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-html="true" title="'+heart+'"><div class="far fa-thumbs-up">'+te+'</div></button>';

您还需要一个在重绘 table 时触发 tooltip() 的处理程序：

$('#example').on('init.dt draw', function() {
  $('[data-toggle="tooltip"]').tooltip()
})

修正版fiddle -> https://jsfiddle.net/kcy8dzjh/

Bootstrap 在数据表 js 中使用转义符号时工具提示上的徽章功能错误

Bootstrap badge function error on the tooltip using escape symbol in the datatable js

javascript

datatables

twitter-bootstrap

jquery-ui-tooltip