Question

$('#input').focusin(function() {
  $('#div').show();
  
  $('#input').keyup(function() {
    $('#div').show();
    //AJAX-REQUEST//
  });
});

$('#input').focusout(function() {
  $('#div').hide();
});

#div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<div id="div">Hello World</div>

您好，在我的代码中，它显示并隐藏了div，同时有in和out，

当我按ctrl，shift，arrows，space或tab时，由于现在没有AJAX请求，它正常工作并保持显示div，

但是，每次按下前面提到的任何键后都添加AJAX Request后，它会再次发送AJAX Request并刷新div。

如何在添加AJAX Request时阻止此行为？

Answer 1

您正在注册通用密钥的处理程序，但您只想在元素聚焦时运行它。

$('#input').focusin(function() {
    $(this).data('focused', true);
    $('#div').show();
});
$('#input').focusout(function() {
    $(this).data('focused', false);
});
$('#input').keyup(function() {
    if ( !$(this).data('focused') ) {
        return;
    }
    $('#div').show();
    //AJAX-REQUEST//
});

Answer 2

首先，请注意您应该将keyup处理程序移到focusin处理程序的之外。现在，您每次点击输入时都会添加另一个AJAX请求。

为了解决这个问题，我假设您只需要在输入非空白字符时进行AJAX请求。如果是，请改为使用keypress事件。

另请注意，focus()和blur()在focusin()和focusout()上的语义更为明确，因为input没有子元素。试试这个：

＆＃13;

$('#input').focus(function() {
  $('#div').show();
}).blur(function() {
  $('#div').hide();
}).keypress(function() {
  console.log('Making an AJAX request now...');
});

＆＃13;

#div {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<div id="div">Hello World</div>

＆＃13;

带有keyup，focus和Keyboard键的重复AJAX请求

2 个答案: