jQuery:在onclick之前针对Ajax建议进行焦点触发 [英] jQuery: focusout triggering before onclick for Ajax suggestion
问题描述
我正在构建一个网页，我需要在该网页上通过下拉列表选择1-9个成员，然后该下拉列表会提供许多输入字段来输入其名称.每个名称字段下面都有一个建议" div，在该div中填充了由ajax填充的成员列表.该列表中的每个项目都有一个与之关联的"onclick ='setMember(a，b，c)'"字段.一旦输入字段失去焦点，我们便会验证(使用ajax)输入的用户名恰好返回了1个数据库条目，并将该字段设置为该条目的文本，并将相关的隐藏memberId字段设置为该条目的ID.
I have a webpage I'm building where I need to be able to select 1-9 members via a dropdown, which then provides that many input fields to enter their name. Each name field has a "suggestion" div below it where an ajax-fed member list is populated. Each item in that list has an "onclick='setMember(a, b, c)'" field associated with it. Once the input field loses focus we then validate (using ajax) that the input username returns exactly 1 database entry and set the field to that entry's text and an associated hidden memberId field to that one entry's id.
问题是:当我在建议框中单击成员名称时，将失去焦点，并会尝试验证具有多个匹配项的名称，从而将其清除.我确实希望将其清除为无效，但是我不希望在点击建议框名称之前将其清除.
The problem is: when I click on the member name in the suggestion box the lose focus triggers and it attempts to validate a name which has multiple matches, thereby clearing it out. I do want it to clear on invalid, but I don't want it to clear before the onclick of the suggestion box name.
示例:
在上面的示例中，如果保罗·史密斯(Paul Smith)在失去焦点时在建议列表中只有一个名字，则可以很好地填充，但是如果我尝试在建议区域中单击拉斐尔(Raphael)的名字(即:单击灰色div)，它将首先清除输入字段.
In the example above Paul Smith would populate fine if there was only one name in the suggestion list when it lost focus, but if I tried clicking on Raphael's name in the suggestion area (that is: clicking the grey div) it would wipe out the input field first.
以下是为简洁起见而修剪的javascript:
Here is the javascript, trimmed for brevity:
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(现在在点击和触发之前已被删除)看起来像这样:
The suggestion divs (which are now being deleted before their onclicks and trigger) simply look like this:
<div onclick='setMember(123, "Raphael Jordan", 2)'>Raphael Jordan</div>
<div onclick='setMember(450, "Chris Raptson", 2)'>Chris Raptson</div>
有人知道我如何解决此优先级问题吗?我敢肯定我不会是第一个遇到这个问题的人，但是我不知道要寻找什么来寻找类似的问题.
Does anyone have any clue how I can solve this priority problem? I'm sure I can't be the first one with this issue, but I can't figure out what to search for to find similar questions.
谢谢！
推荐答案
如果使用mousedown而不是单击建议绑定，它将在输入模糊之前发生. JSFiddle .
If you use mousedown instead of click on the suggestions binding, it will occur before the blur of the input. 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>
这篇关于jQuery:在onclick之前针对Ajax建议进行焦点触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
