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>