jQuery keyup事件被多次激活，每次触发时都会翻倍

pedrodcb

我在网站上添加了自动完成的搜索栏。每次用户键入新字符时，它都会在数据库中查询以输入的字符串开头的元素。

它可以正常工作，但是每次用户添加另一个字符或执行任何键盘事件（如退格键）时，事件激活都会加倍。1,2,4,8,16等次。

我如何才能做到这一点，使其不累积事件触发器，而每个键盘事件仅触发一次.keyup（）？

这是HTML代码：

<form>
<div class="nav-item">
    <input class="search-query form-control" placeholder="Items" 
       type="text"  name="items" value="" id="id1" />
</div>
</form>
<hr>
<div id="id2">
</div>

这是jQuery代码：

$(document).ready(function() {
  $('#id1').keyup(function(){
    var query = $(this).val();
    $.get('/url/', {items: query}, function(data){
      $('#id2').html(data);
    });
  });
});

pedrodcb

我终于想出了解决方法。

对于任何感兴趣的人，这是我的做法：

（如果我错了，显然是经验丰富的用户，请随时纠正我！）

基本上，添加.one（）方法可以解决该问题。因为它"#id1"仅执行一次事件就将事件与元素分离。

这是功能代码：

$(document).ready(function() {
  $('#id1').one("keyup", function(){
    var query = $(this).val();
    $.get('/url/', {items: query}, function(data){
      $('#id2').html(data);
    });
  });
});

为了进行比较，这是上面再次发布的旧版本：

$(document).ready(function() {
  $('#id1').keyup(function(){
    var query = $(this).val();
    $.get('/url/', {items: query}, function(data){
      $('#id2').html(data);
    });
  });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。