mouseover 显示原始 html 数据并触发无限时间

Question

我有一个树形结构，在悬停用户图像时，它应该显示一些其他用户相关信息，但不是在适当的 div 中显示该信息，而是显示原始 HTML 数据。

HTML 代码

可以有n个a href

<a href="{{ route('user-binary-tree',[ 'eUserID' => $ERight12]) }}" class="bt-element binary-tree-on-hover" id="{{$ERight12}}">
                                    <img class="rounded-circle" style="width: 50px" src="{{ asset($packageImg) }}">
                                    {{ $Right12[0]->sponsor_code }}
                                </a>

JavaScript 代码

$('.binary-tree-on-hover').mouseover(function() {
        var userId = this.id;
        var $this = $(this);
        $.ajax('/binary-tree-ajax/' + userId + '/html', {
            method: "GET",
            dataType: "html",
            success: function(data) {
                $this.attr('title', data).mouseover(); //HTML DATA SHOW IN HOVER
            }
        });
    });

Ajax 响应是

<div class="bt-details">
<table class="table color-table inverse-table">
    <thead>
        <tr>
            <td class="text-center" style="font-size: 100%">Chethan k Test</td>
            <td class="text-center" style="font-size: 100%"></td>
            <td class="text-center">
                 <span class="btn btn-danger btn-xs btn-outline" style="border-width: 2px;">Inactive</span>
            </td>
        </tr>
        <tr>
            <td class="text-center" style="font-size: 100%">Sponsor ID</td>
            <td class="text-center" style="font-size: 100%" colspan="2">UNO187175</td>
        </tr>
        <tr>
            <td class="text-center" style="font-size: 100%">Binary Qualified</td>
            <td class="text-center" style="font-size: 100%" colspan="2">
                <span class="btn btn-danger btn-xs btn-outline" style="border-width: 2px;">No</span>
            </td>
        </tr>
        <tr>
            <th width="40%" class="text-center">Position</th>
            <td class="text-center" style="font-size: 95%">Left</td>
            <td class="text-center" style="font-size: 95%">Right</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th width="40%" class="text-center">Downline</th>
            <td class="text-center">39</td>
            <td class="text-center">6</td>
        </tr>
        <tr>
            <th width="40%" class="text-center">Business</th>
            <td class="text-center">$0</td>
            <td class="text-center">$0</td>
        </tr>
        <tr>
            <th width="40%" class="text-center">Carry</th>
            <td class="text-center">$0</td>
            <td class="text-center">$0</td>
        </tr>
        <tr>
            <th width="40%" class="text-center" rowspan="2">Binary Generated</th>
            <td class="text-center" style="font-size: 95%">Last Day</td>
            <td class="text-center" style="font-size: 95%">Till Date</td>
        </tr>
        <tr>
            <td class="text-center">$0</td>
            <td class="text-center">$</td>
        </tr>
    </tbody>
</table>

当我将鼠标悬停在任何用户图像上时，它会显示行 HTML 数据，而不是第一张图像中看到的正确 div 它也无限次地调用 Ajax 请求，但是当我删除 $this.attr('title', data).mouseover(); 时，它只调用一次 Ajax 请求。所以我认为无限调用的发生只是因为这条线。

这里是如何显示的

但我想这样展示

注意：第二个正在工作，但它不是 ajax 调用，它会从控制器获取所有用户信息并加载到视图中，因此当用户增加时它会减慢页面速度，所以我试图在图像悬停时调用 ajax .

Answer 1

最终使用弹出功能

HTML 代码

<div id="popover_html" style="display:none;">
    hover_data
</div>

JavaScript 代码

jQuery('.binary-tree-on-hover').popover({
    title: popoverContent,
    html: true,
    placement: 'bottom',
    trigger: 'hover'
});

function popoverContent() {
    var content = '';
    var element = $(this);
    var id = element.attr("id");
    var APP_URL = "{{ url('/')}}";
    const adminRoutePrefix = $("#admin_route_prefix").text();
    $.ajax({
        url: APP_URL + '/' + adminRoutePrefix + '/networks/binary-tree-ajax/' + id + '/html',
        method: "GET",
        async: false,
        // dataType: "HTML",
        success: function(data) {
             content = $("#popover_html").html();
             content = content.replace(/hover_data/g, data);
        }
    });

    return content;
}