Question

我在页面顶部有一个搜索框，当用户点击相邻按钮时会发出ajax调用。我正在尝试更新输入标记，以便当用户点击'enter'键时，适当的JavaScript将发生而不会重新加载页面。问题是页面不断重新加载。这是我最近的尝试：

$("searchText").bind('keyup', function(event){ 
  if(event.keyCode == 13){ 
    event.preventDefault();
    $("#buttonSrch").click(); 
    return false;
  }
});

<input type='search' id='searchText' />
<input type='button' id='buttonSrch' onclick="search(document.getElementById('searchText'))" value='Search' />

Answer 1

不要绑定到input;绑定到form。假设form的ID为searchForm：

$("#searchForm").submit(function() {
    search($("#searchText").get(0));
    return false;
});

<强> Try it out.

也可以使用纯JavaScript：

document.getElementById('searchForm').addEventListener('submit', function(e) {
    search(document.getElementById('searchText'));
    e.preventDefault();
}, false);

Answer 2

您在选择器中缺少#。试试这个

<input type='text' id='searchText' />

JS

$("#searchText").bind('keyup', function(event){ 
  if(event.keyCode == 13){ 
    event.preventDefault();
    //$("#buttonSrch").click(); 
    search(this.value);
  }
});

Answer 3

我知道它有点晚了，但我遇到了和你一样的问题。它对我使用“keypress”而不是bind。

$('#searchText').keypress(function (e) {                                       
       if (e.which == 13) {
            e.preventDefault();
            //do something   
       }
});

Answer 4

在表单标记

上添加onSubmit="return false;"

<form onSubmit="return false;">
/* form elements here */
</form>`

Answer 5

 $('#seachForm').submit(function(e){
      e.preventDefault();
      //do something
 });

Answer 6

您可以将表单操作属性设置为javascript：void（0）;这样，表单不会发布/获取，因此页面不会刷新。

$(document).ready(function () {
  $('#form1').attr('action', 'javascript:void(0);');
});

Answer 7

只需使用<form>标记中的“操作”属性即可。喜欢这个

<form action="#">   // your content     </form>

Answer 8

您的JS是立即执行还是文档准备就绪？如果它不在准备好的文档中，则在您尝试呼叫bind时该按钮将不存在。

Answer 9

这最终为我工作。请注意，我的斗争是找到触发表单提交的对象：

$('#missingStaff').submit(function (e) {
e.preventDefault();
var comment = $(document.activeElement)[0];
submitComments(comment);

}）;

Answer 10

$("searchText").keypress(function(event){ 
  if(event.keyCode == 13){ 
    $("#buttonSrch").click(); 
    return false;
  }
});

Answer 11

你只需要添加这个：

<form @submit.prevent="search">

为搜索触发的任何函数。当我按下那个搜索按钮 search() func 被触发。这就是为什么：@submit.prevent="search"

async search() {
  let yuyu = document.getElementById('search').value
  console.log('lsd', yuyu)
  try {
    let newRecipes = await this.$axios.$get(
      `/api/videosset/?user=&id=&title=${yuyu}&price=&category=`
    )
    this.$store.commit('CHANGE_NAV_LAYOUT', newRecipes)
  } catch (e) {
    console.log(e)
  }
},

使用“Enter Key”停止重新加载页面

11 个答案: