我有一个我正在构建的网页,我需要能够通过下拉列表选择1-9个成员,然后提供许多输入字段来输入他们的名字。每个名称字段下面都有一个“建议”div,其中填充了ajax-fed成员列表。该列表中的每个项目都有一个“onclick ='setMember(a,b,c)'”字段。一旦输入字段失去焦点,我们就会验证(使用ajax)输入用户名正好返回1个数据库条目,并将字段设置为该条目的文本,并将相关的隐藏memberId字段设置为该条目的id。
问题是:当我点击建议框中的成员名称时,失去焦点会触发,它会尝试验证具有多个匹配项的名称,从而清除它。我确实希望它清除无效,但我不希望它在建议框名称的onclick之前清除。
示例:
在上面的示例中,如果建议列表中只有一个名称失去焦点,保罗史密斯将填充正常,但如果我尝试在建议区域中单击拉斐尔的名称(即:单击灰色div),它将会首先清除输入字段。
这是javascript,为了简洁而修剪:
function memberList() {
var count = document.getElementById('numMembers').value;
var current = document.getElementById('listMembers').childNodes.length;
if(count >= current) {
for(var i=current; i<=count; i++) {
var memberForm = document.createElement('div');
memberForm.setAttribute('id', 'member'+i);
var memberInput = document.createElement('input');
memberInput.setAttribute('name', 'memberName'+i);
memberInput.setAttribute('id', 'memberName'+i);
memberInput.setAttribute('type', 'text');
memberInput.setAttribute('class', 'ajax-member-load');
memberInput.setAttribute('value', '');
memberForm.appendChild(memberInput);
// two other fields (the ones next to the member name) removed for brevity
document.getElementById('listMembers').appendChild(memberForm);
}
}
else if(count < current) {
for(var i=(current-1); i>count; i--) {
document.getElementById('listMembers').removeChild(document.getElementById('listMembers').lastChild);
}
}
jQuery('.ajax-member-load').each(function() {
var num = this.id.replace( /^\D+/g, '');
// Update suggestion list on key release
jQuery(this).keyup(function(event) {
update(num);
});
// Check for only one suggestion and either populate it or clear it
jQuery(this).focusout(function(event) {
var number = this.id.replace( /^\D+/g, '');
memberCheck(number);
jQuery('#member'+number+'suggestions').html("");
});
});
}
// Looks up suggestions according to the partially input member name
function update(memberNumber) {
// AJAX code here, removed for brevity
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
document.getElementById('member'+memberNumber+'suggestions').innerHTML = self.xmlHttpReq.responseText;
}
}
}
// Looks up the member by name, via ajax
// if exactly 1 match, it fills in the name and id
// otherwise the name comes back blank and the id is 0
function memberCheck(number) {
// AJAX code here, removed for brevity
if (self.xmlHttpReq.readyState == 4) {
var jsonResponse = JSON.parse(self.xmlHttpReq.responseText);
jQuery("#member"+number+"id").val(jsonResponse.id);
jQuery('#memberName'+number).val(jsonResponse.name);
}
}
}
function setMember(memberId, name, listNumber) {
jQuery("#memberName"+listNumber).val(name);
jQuery("#member"+listNumber+"id").val(memberId);
jQuery("#member"+listNumber+"suggestions").html("");
}
// Generate members form
memberList();
建议div(现在在他们的onclicks和触发器之前被删除)看起来像这样:
<div onclick='setMember(123, "Raphael Jordan", 2)'>Raphael Jordan</div>
<div onclick='setMember(450, "Chris Raptson", 2)'>Chris Raptson</div>
有没有人知道如何解决这个优先级问题?我确信我不能成为第一个遇到这个问题的人,但我无法弄清楚要搜索什么来找到类似的问题。
谢谢!
答案 0 :(得分:6)
如果使用mousedown而不是单击建议绑定,则会在输入模糊之前发生。 JSFiddle
<input type="text" />
<a href="#">Click</a>
$('input').on('blur', function(e) {
console.log(e);
});
$('a').on('mousedown', function(e) {
console.log(e);
});
或者更具体地说是你的情况:
<div onmousedown='setMember(123, "Raphael Jordan", 2)'>Raphael Jordan</div>