的jQuery返回false不停止滾動從服務器輸入後的keydown

Question

樣本HTML響應：

<ul class="datalistPlaceholder hidden" style="display: block;"> 
    <li><a class="tag" href="#">#<span style="font-weight: bold">ar</span>igato</a></li> 
    <li><a class="tag" href="#">#<span style="font-weight: bold">ar</span>izona</a></li> 
    <li><a class="tag" href="#">#cle<span style="font-weight: bold">ar</span>water</a></li> 
</ul> 

的jQuery：

$(document).ready(function(){ 
    $('#search-field').keyup(function(e) { 
     ajaxAutocomplete.call(this, e); 
    }); 
}); 

function ajaxAutocomplete(e) { 
    var hash_tag = $.trim($(this).val()); 

    $.ajax({ 
     url  : 'autocomplete.php', 
     method : 'GET', 
     dataType: 'html', 
     data : {tag : hash_tag} 
    }) 
    .done(function(response) { 
     if (response) { 
      $('.datalistPlaceholder').html(response).show(); 

      if (e.keyCode === 40) { // down key 
       $('.tag:first').focus(); 
       $('.tag').keydown(function(e) { 
        down.call(this, e); 
       }); 
      } else if (e.keyCode === 38) { // up key 
      } 
     } else { 
      $('.datalistPlaceholder').hide(); 
     } 
    }) 
    .fail(function() { 
     alert('Something went wrong'); 
    }); 
} 

function down(e) 
{ 
    if (e.keyCode === 40) { 
     $(this).parent('li').next().find('.tag').focus(); 
     // stops page from scrolling 
     return false; 
    } 
} 

當用戶使用向下箭頭鍵選擇從下拉選項下拉菜單滾動頁面。我認爲回覆錯誤會阻止這一點。我究竟做錯了什麼？

Answer 1

這是發生，因爲你有這樣的：

$('.tag').keydown(function(e) { 
    down.call(this, e); 
}); 

不知道爲什麼你正在做這樣的說法，而不是僅僅使用down直接，但不必返回任何down()回報讓你匿名的回調函數會返回undefined代替false

要麼使用down直接作爲回調函數或做額外的回報

$('.tag').keydown(down); 
//or 
$('.tag').keydown(function(e) { 
    return down.call(this,e) 
}); 

請注意，您也可以撥打e.preventDefault()而不是返回false以防止默認操作。

作爲一個便箋$('.tag').keydown(function(e)...每次在您的done回調將不斷添加新的事件處理程序的那些可能不會被$('.datalistPlaceholder').html(response)破壞的元素。您可以使用委託的事件，這樣你只需要創建一次的處理程序：

$(document).ready(function(){ 
    $('.datalistPlaceholder').on("keydown",".tag",down); 
});