Question

我有一个奇怪的问题。我有一个适用于2个不同div的函数。当我单击功能触发的按钮时，就可以了。但是相同的功能不适用于另一个div的keyup事件。

function search(){
    $("#search-input").css("border","1px solid #ced4da");
    if(!$("#search-input").val() || $("#search-input").val().length<=2){
        $("#search-input").css("border","1px solid red");
    }else{
        var key = encodeURIComponent($("#search-input").val());            
        window.location = 'keywords/'+encodeURIComponent(key);
    } 
}

$("#search-submit-btn").on("click",function(){
    search();      
});

$("#search-input").on("keyup",function(e){
    if (e.keyCode==13){
      search();  
    }
});

click事件运行正常。点击事件的结果：页面被重定向到

localhost/search-engine/keywords/whatever-users-search

但是keyup事件的结果：页面被重定向到

localhost/search-engine/?

HTML标记

<div class="modal fade" id="search-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-search"></i> Search</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <form>
      <div class="modal-body">
        <input class="form-control form-control-lg my-4" id="search-input" type="text" placeholder="At least 3 char.">         
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i>&nbsp;Close</button>
        <button type="button" class="btn btn-primary" id="search-submit-btn"><i class="fas fa-search"></i>&nbsp;Search</button>
      </form>
    </div>
  </div>
</div>

我想念什么吗？

----------------解决方案-----------------

HTML标记具有<form>标签。我完全想念它。所以我删除了表单标签，一切正常。

我的函数适用于单击事件但可以进行击键（JQuery）

0 个答案: