停止使用“输入键”重新加载页面

Question

我在页面顶部有一个搜索框，当用户点击相邻按钮时，它会进行 ajax 调用。 我正在尝试更新输入标签，以便当用户点击“输入”键时，无需重新加载页面即可执行适当的 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 s； 绑定到form 。 假设form的 ID 为searchForm ：

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

试试看。

也可以使用纯 JavaScript 来完成：

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

Answer 2

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

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

Answer 3

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

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

JS

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

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>标签中使用“action”属性。 像这样

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

Answer 8

这就是最终为我工作的原因。 请注意，我的努力是找到触发表单提交的对象：

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

});

Answer 9

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

Answer 10

你只需要添加这个：

<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)
  }
},

Answer 11

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