jQuery:在onclick之前针对Ajax建议进行focusout触发

Question

我有一个我正在构建的网页,我需要通过下拉列表选择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>

有没有人知道如何解决这个优先问题？我确信我不能成为第一个遇到这个问题的人,但我无法弄清楚要搜索什么来找到类似的问题.

谢谢!

Answer 1

如果您使用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>