Javascript JIRA扩展无法在悬停时工作
Javascript JIRA Extension not working on hover
我开发了一些Javascript示例,它创建了一个JIRA工具提示(使用Tipsy AUI指南-https://docs.atlassian.com/aui/5.4.0/docs/tooltips.html)当您将鼠标悬停在问题链接上时,Ticket状态、Summary、Assignee和fixVersion的详细信息。主要用于问题搜索页面,防止连续右键点击->在新选项卡中打开->检查。。。这变得非常乏味,但也可以用于大多数其他问题链接。
这意味着在悬停链接时工作,但它并不总是按计划进行。当我第一次将鼠标悬停在"任何问题"链接上时,它会生成一个"未定义"的工具提示。当我第二次将鼠标悬停在"任何问题"链接上时,它会按预期生成准确的工具提示。把它复制到你的控制台上,我相信你会看到同样的行为。
我不是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');
});
我重构了你的代码,它运行正常。诀窍是在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});
});
});
});
再次阅读你的问题,以及你在下面的评论,表明你想要一种不同于我最初建议的方法。由于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, ...});
}
}
- 为什么jquery悬停在jsfiddle中可以工作,而在我的html布局中却不能
- 链接don'由于Javascript悬停效果,无法在移动设备上工作
- 链接悬停css在不浮动时不在表浮动标题中工作
- 在jquery中切换类不在悬停中工作
- 努力让第n个有悬停的孩子在IE工作
- 地图,rails 4.2,javascript,鼠标悬停,只工作一次(或两次).然后在重新加载之后
- 切换悬停和单击无法正常工作
- fadeIn在悬停时工作,但在单击/单击时不工作
- Javascript JIRA扩展无法在悬停时工作
- replaceWith&fadeIn/fadeOut-悬停后无法工作
- 只显示潜水时悬停按钮X时间-可以'我不能使它正常工作
- css img:悬停工作,img:活动无效
- jQuery悬停只工作一次
- 停止动画停止工作,jQuery/悬停
- 如何将悬停事件添加到 SVG 中的多个路径?并让它在IE9中工作
- 悬停添加类在Chrome上出现故障,但在Firefox上工作正常
- 打开和悬停不一起工作
- 鼠标悬停在整个页面上工作,而不是一个元素
- jQuery 悬停在几秒钟后停止工作
- 为什么只有第一个鼠标悬停和鼠标悬停工作?