按下回车键跳转至/workers/VALUE时返回undefined问题求助

嘿，我一眼就看出问题出在哪了——你把jQuery业务代码放在了jQuery库的引入之前啦！这就好比还没拿到工具就想干活，自然拿不到输入框的值，最后product变量就变成undefined了。

问题根源 #

浏览器是按顺序加载脚本的，当你的$(document).ready代码执行时，jQuery库还没被加载，$这个函数根本不存在，所以$("#search-box").val()完全没法正常获取输入框的值，结果就是product为undefined，跳转路径也就变成了/workers/undefined。

另外还有个小建议：把事件绑定在搜索框本身而不是整个document上，这样更精准，不会影响页面上其他输入框的回车行为。

修正后的代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // 直接绑定到搜索框的keypress事件
  $("#search-box").keypress(function(e) {
    if (e.which == 13) {
      e.preventDefault(); 
      var product = $(this).val(); // 用$(this)直接引用当前触发事件的输入框，更简洁
      // 增加空值判断，避免无内容跳转
      if (product.trim()) {
        window.location.href = "/workers/" + product;
      }
    }
  });
});
</script>

额外检查点 #

• 确认你的搜索框HTML代码里确实有id="search-box"属性，注意id是区分大小写的，别出现拼写错误。
• 如果还是有问题，可以打开浏览器的开发者工具（按F12），切换到Console标签，看看有没有报错信息，这能帮你快速定位问题。

内容的提问来源于stack exchange，提问作者John Lang