javascript - 带有 Ajax 调用的 Bootstrap Popover 不显示数据

Question

我似乎无法使用 Ajax 结果更新弹出窗口内容。

ASP.Net (MVC4):

public ActionResult GetEmployeeDetails(string employeeId)
        {
            var contract = UnitOfWork.ContractRepository.ContractBusinessManager.GetContract(int.Parse(employeeId), DateTime.Now);

            return PartialView("_EmployeeDetails", contract);
        }

HTML:

<a data-toggle-popup-employee-id="@evaluation.EmployeeId" >@evaluation.Employee.FullName.ToTitle()</a>

Javascript:

$(document).ready(function () {
        $('[data-toggle-popup-employee-id]').popover(
        {
            html: true,
            placement: 'top',
            title: 'Title',
            container: 'body',
            content: function () {
                //$(this).off('hover');
                var employeeId = $(this).data('toggle-popup-employee-id');
                $.ajax({
                    async: false,
                    url: '@Url.Action("GetEmployeeDetails", "Evaluation")',
                    data: { employeeId: employeeId },
                    success: function (result) {
                        return result;
                        //var html = result;
                        //$(this).contents.html = result;
                    },
                    error: function (xhr) {
                        alert(xhr.responseText);
                    }
                })
            },
            trigger: 'hover'
        });
});

调用工作正常并以 html 形式返回部分结果，但弹出窗口内容仍然为空...

更新:

似乎每次我将鼠标悬停在链接上时，10 [Object, HTMLAnchorElement]直接添加到 $('[data-toggle-popup-employee-id]')。每个对象都将 InnerText 和 InnerHtml 设置为员工姓名...？

Answer 1

我个人会做类似下面的事情......

$(document).ready(function () {


    $('[data-toggle-popup-employee-id]').on({
        mouseenter: function () {

            var originator = $(this);

            var employeeId = originator.data('toggle-popup-employee-id');

            $.get('@Url.Action("GetEmployeeDetails", "Evaluation")', { employeeId: employeeId }, function (data) {

                originator.popover({
                    html: true,
                    placement: 'top',
                    title: 'Title',
                    container: 'body',
                    content: data,
                }).popover('show');

            })

        },
        mouseleave: function () {

            //
            // Destroy so the data will referesh
            //
            $(this).popover('destroy');

        }
    });

});

这样我们就可以在 ajax 请求的回调中初始化弹出窗口。

希望这是有道理的。