在追加元素上添加工具提示<li>不起作用

Question

我有一个实时搜索功能，该功能将返回完整的li元素，然后将其附加到某个容器中。但是工具提示不起作用。这是我的代码：

$(".hb_search_text_job").on('keyup', function() {
    var search_val = $('.hb_search_text_job').val();
    var current_user_id = $('.hb_footer_user_id').val();
        if(search_val.length > 2){
            $.ajax({
            type: "POST",
            url: "<?php echo admin_url('admin-ajax.php'); ?>",
            data: { action: 'search_jobs_list', 
                    current_user_id: current_user_id,
                    search_val: search_val
            },
            success: function(data) {
                $('#hb_sidebarmenu li .submenu li .submenu li').remove();
                    $.each(JSON.parse(data), function(key,val) {
                        $('#hb_sidebarmenu li .submenu li .submenu .hb_job_listing').append(val);
                },
                error: function() {
                    console.log('ERROR');
            }
        });
    }
});

这是返回代码的示例：

<li data-rel='tooltip' rel='tooltip' title='A tooltip yay!'>";
    <a href='#' class='hb_job_id_link'>";
    <div class='hb_menu_name'>My li name</div>";
</a></li>";

任何可能的想法或解决方案？

Answer 1

添加内容后，您需要重新初始化工具图。

success: function(data) {
     $('#hb_sidebarmenu li .submenu li .submenu li').remove();
     $.each(JSON.parse(data), function(key,val) {
         $('#hb_sidebarmenu li .submenu li .submenu .hb_job_listing').append(val);
     }
     $("[data-rel='tooltip']").tooltip(); // Re-init tooltip
},