Javascript JIRA 扩展在悬停时不起作用

Question

我开发了一些 Javascript 示例，当您将鼠标悬停在问题链接上时，它会创建工单状态、摘要、受让人和 fixVersion 的 JIRA 工具提示（使用 Tipsy AUI 指南 - https://docs.atlassian.com/aui/5.4.0/docs/tooltips.html）。主要用于问题搜索页面，防止连续右键 -> 在新标签中打开 -> 检查... 变得非常繁琐，但也可以用于大多数其他问题链接。

它适用于悬停链接，但并不总是按计划进行。当我第一次将鼠标悬停在任何问题链接上时，它会产生一个工具提示“未定义”。当我第二次将鼠标悬停在任何问题链接上时，它会按预期生成准确的工具提示。将其复制到您的控制台中，我很确定您会看到相同的行为。

我不是 Javascript 专家，所以可能是我不知道的 Javascript 机制，所以如果有人知道为什么会发生这种情况，请告诉我！

我也把它打包成一个JIRA插件，看到同样的结果。

AJS.toInit(function () {

var url,
issue_id,
offset,
x,
y,
jira_data,
html,
fixVersions,
assignee,
domain = document.location;

// build url whatever it might be
url = domain.protocol +'//'+ domain.hostname
if (domain.port !== "") {
    url += ':'+domain.port
}

AJS.$(".issue-link, td.issuelinks > a, #ghx-issues-in-epic-table > tbody > tr > td > a").tooltip({

    title: function () {

        // GETS THE ISSUE ID FROM THE HREF ELEMENT
        issue_id = (AJS.$(this).attr("href")).slice((AJS.$(this).attr("href")).lastIndexOf("/"), (AJS.$(this).attr("href")).length);
        // QUERIES JIRA API - ALREADY AUTHENTICATED WITH SESSION
        jira_data = AJS.$.getJSON(url+'/rest/api/2/issue' + issue_id, function (json) {

        })
            // AJAX COMPLETE FUNCTION
            jira_data.done(function (jira_data) {
            // CHECK FOR FixVersoin and Multiple FixVersions
            fixVersions = ""
            if (jira_data['fields']['fixVersions'] === undefined) {
                fixVersions = "None";
            } else {
            AJS.$.each(jira_data['fields']['fixVersions'], function(index, value) {
                fixVersions += value['name'] + " ";
            });};
            // CHECK FOR UNASSIGNED
            if (jira_data['fields']['assignee'] === undefined) {
                assignee = "Unassigned";
            } else {
                assignee = jira_data['fields']['assignee']['displayName'];
            };            
            // BUILD STRING OUTPUT
            html = "<span style='text-align:left'>";
            html += "<strong>Status: </strong>" + jira_data['fields']['status']['name'] + "</br>"
            html +="<strong>Assignee: </strong>" + assignee + "</br>";
            html += "<strong>Fix Version:  </strong>" +fixVersions+ "</br>";
            html += "<strong>Summary: </strong>" + jira_data['fields']['summary'];
            html += "</span>"

        });
        return html;
    }, live: true, gravity: AJS.$.fn.tipsy.autoWE, html:true, delayIn: 400, delayOut: 50});


        // REMOVE TITLE TAG TO PREVENT OBSTURCTION
AJS.$(".issue-link, td.issuelinks > a, #ghx-issues-in-epic-table > tbody > tr > td > a").removeAttr('title');    
AJS.$(".issue-link, td.issuelinks > a, #ghx-issues-in-epic-table > tbody > tr > td > a").parent().removeAttr('title');

});

Answer 1

我重构了您的代码，它工作正常。诀窍是在 ajax 回调函数中填充工具提示。

AJS.toInit(function () {

var url,
issue_id,
offset,
x,
y,
jira_data,
html,
fixVersions,
assignee,
domain = document.location;

// build url whatever it might be
url = domain.protocol +'//'+ domain.hostname
if (domain.port !== "") {
    url += ':'+domain.port
}

AJS.$(".issue-link, td.issuelinks > a, #ghx-issues-in-epic-table > tbody > tr > td > a").hover(function () {

         console.log('Entro')
        // GETS THE ISSUE ID FROM THE HREF ELEMENT
        issue_id = (AJS.$(this).attr("href")).slice((AJS.$(this).attr("href")).lastIndexOf("/"), (AJS.$(this).attr("href")).length);
        // QUERIES JIRA API - ALREADY AUTHENTICATED WITH SESSION

        jira_data = AJS.$.getJSON(url+'/rest/api/2/issue' + issue_id, function (json) {

        })
            // AJAX COMPLETE FUNCTION
            jira_data.done(function (jira_data) {
            // CHECK FOR UNASSIGNED
            if (jira_data['fields']['assignee'] === undefined) {
                assignee = "Unassigned";
            } else {
                assignee = jira_data['fields']['assignee']['displayName'];
            };            
            // BUILD STRING OUTPUT
            html = "<span style='text-align:left'>";
            html += "<strong>Summary: </strong>" + jira_data['fields']['summary'] + "</br>";
            html += "<strong>Status: </strong>" + jira_data['fields']['status']['name'] + "</br>";
            html +="<strong>Asignado: </strong>" + assignee + "</br>";
            html += "</span>";
            AJS.$(".issue-link, td.issuelinks > a, #ghx-issues-in-epic-table > tbody > tr > td > a").removeAttr('title');    
			AJS.$(".issue-link, td.issuelinks > a, #ghx-issues-in-epic-table > tbody > tr > td > a").parent().removeAttr('title');
            AJS.$(".issue-link, td.issuelinks > a, #ghx-issues-in-epic-table > tbody > tr > td > a").tooltip({title:function () {
        return html;
    },live: true, gravity: AJS.$.fn.tipsy.autoWE, html:true, delayIn: 400, delayOut: 50});
        });
});
});

Answer 2

问题（或至少是“一个”问题）是您在收到鼠标悬停事件之前没有将工具提示附加到链接。附加工具提示后，工具提示库然后开始寻找鼠标悬停事件。如果您在添加工具提示时已经将鼠标悬停在元素上，则不清楚这将如何工作，这让我认为它与问题有关。无论如何，您都不想重新初始化每次用户将鼠标悬停在链接上时的工具提示处理程序。

你需要使用 live-type events 和醉意。在这种情况下，您不附加自己的鼠标悬停处理程序，而是让工具提示库处理它。你想要一些类似的东西：

再次阅读您的问题以及下面的 cmets，建议您采用与我最初建议的方法不同的方法。由于 Tipsy 似乎没有原生 AJAX 支持，因此您需要回到更接近您最初编写的内容。

目标是为每个链接附加一个实时处理程序，并查看该链接是否已被注释为提示信息。如果没有，您需要执行 AJAX 调用来获取数据。一旦 AJAX 调用返回，您才需要附加提示提示。

这假定当您已经将鼠标悬停在元素上并添加工具提示时，tipsy 会正确处理这种情况，然后使其立即呈现工具提示。从您原来的帖子来看，这听起来像是因为您得到了“未定义”。

换句话说，是这样的：

AJS.$(document).on("mouseover", ".issue-link, td.issuelinks > ...etc...")(function(e) {
    var $el = AJS.$(e.currentTarget);

    // Attach an attribute so that we only do this once per element:

    if ($el.attr('data-has-tipsy') === 'yes') {
         return; // already handled
    }

    $el.attr('data-has-tipsy', 'yes');

    // Now call your code to get the issue data here.
    // issue_id = ...
    // jira_data = ...

    jira_data.done(function (jira_data) {

        // calculate html here
        var html = 'Hello, Bob';

        // Finally, attach the tooltip within the done function!
        $el.tooltip({title: html, gravity: 'n', html: true, ...});
    }
}