Javascript JIRA 扩展在悬停时不工作

Question

我开发了一些 Javascript 示例，当您将鼠标悬停在问题-link。主要用于问题搜索页面，防止连续右击->在新标签中打开->检查...变得极其繁琐，但也可用于大多数其他问题links.

它的目的是在 link 悬停时工作，但它并不总是按计划进行。当我第一次将鼠标悬停在任何问题 link 上时，它会生成一个工具提示 'undefined'。当我第二次将鼠标悬停在 ANY issue-link 上时，它会按预期生成准确的工具提示。将它复制到您的控制台，我很确定您会看到相同的行为。

我不是 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

问题（或至少 "a" 问题）是您在收到鼠标悬停事件之前没有将工具提示附加到 link。附加工具提示后，工具提示库 then 开始寻找鼠标悬停事件。如果您在添加工具提示时已经将鼠标悬停在元素上，则尚不清楚这将如何工作，这让我认为它与问题有关。无论如何，您不想重新初始化每次用户将鼠标悬停在 link.

上时的工具提示处理程序

~~你需要喝醉 live-type events。在那种情况下，您不附加自己的鼠标悬停处理程序，而是让工具提示库处理它。你想要这样的东西：~~

再次阅读您的问题以及您在下面的评论，表明您想要一种不同于我最初建议的方法。由于 Tipsy 似乎没有原生 AJAX 支持，您需要返回到更接近您最初编写的内容。

目标是为每个 link 附加一个实时处理程序，并查看 link 是否已被注释为微不足道的工具提示。如果没有，您需要执行 AJAX 调用来获取数据。 AJAX 调用返回后，您才想附上醉意的工具提示。

这假设当您已经将鼠标悬停在某个元素上并添加工具提示时，tipsy 会正确处理这种情况，然后使其立即呈现工具提示。从你原来的 post 来看，这听起来像是因为你得到了 'undefined'.

换句话说，是这样的：

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, ...});
    }
}

Answer 2

我重构了你的代码，它工作正常。诀窍是在 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});
        });
});
});

Javascript JIRA 扩展在悬停时不工作

Javascript JIRA Extension not working on hover

javascript

jquery

plugins

jira