jQuery 按键事件仅适用于末尾带有#号的网址

Question

我得到了我的第一个测试网站版本。 Links here. 您可能会注意到右上角有一个搜索框。如果您只需键入搜索查询并单击搜索，一切都会正常进行。但是，如果您只是键入搜索查询并按回车键。它只会刷新整个页面。

仅供参考。您需要搜索可用的颜色名称。喜欢 blue 或 red.

但是，如果您先单击搜索按钮，然后更改查询并按回车键。这次它会起作用。您会注意到 url 地址末尾添加了 #。

Js代码如下。或者你可以去我的页面查看资源。

$("#query").keyup(function(event){
    if(event.keyCode == 13){
      $("a#submit").click();
    }
  });

  $('a#submit').click(function(event) {
    var query = $('#query').val()
    var url = 

    $.getJSON(url, function(json, textStatus) {
      ...};
 ...};

这是一个错误或我该如何解决它。谢谢你。

Answer 1

向表单提交事件添加 preventDefault 将阻止页面重新加载。在这里阅读更多相关信息：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

$('#formid').submit(function(event) { // Note that you'll need to give your form an id
    event.preventDefault();
}

您可能希望 onclick 和 submit 事件都调用一个函数。

Answer 2

您需要一个处理程序函数，并结合终止浏览器的默认操作以获得正确的表单，仅此而已。

您网站上的代码在 URL 中使用散列 (#) 以确保页面在搜索时不会更改（在幕后使用异步 XMLHttpRequest）。

带哈希的搜索事件仅发生在 $('#search-btn').click()。

现在，您希望在多个事件（click、keyDown/keyUp）上提交，而不是在 [=31= 中重新加载页面（相反地附加 ?） ]（准备一个好的老式POST）。

我们需要将代码包装在一个处理函数中，并在 click 和 keyDown/keyUp 事件的适当位置附加监听器。

清理代码（ES6 - 希望你不介意...）

const submitHandler = (e) => {
    const query = $('#query').val() || e.target.value
    const url = 'https://api.fashion.net/colors/'

    // shorthand GET request
    $.getJSON(url, (json, textStatus) => {
        // ... do stuff with response ...
    })
    .done(() => {
        // ... do stuff when done ...
    })
    .fail(err => {
        console.log('error: ', err);
    })
}

// handle user query on 'search' click
$('#submit').click(submitHandler)

// handle user query on 'enter' pressed
// NOTE: invalidates default action
$('#query').keyDown((e) => {
    if (e.keyCode === 13) {
        // kill browser default
        e.preventDefault()
        // run submit handler
        submitHandler(e)
        // exit
        return
    }
})

jQuery 按键事件仅适用于末尾带有#号的网址

jQuery key press event only work in web address with # sign at the end

javascript

url

jquery

keypress

清理代码（ES6 - 希望你不介意...）