javascript - 工具提示上的 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 字符串”时需要格外小心。要更正错误:

• 删除引用冗余("" 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>';

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

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

fiddle 的固定版本 -> https://jsfiddle.net/kcy8dzjh/