Jquery .value 在函数中返回未定义以返回输入值答案

【问题标题】：Jquery .value returning undefined in function to return input valueJquery .value 在函数中返回未定义以返回输入值
【发布时间】：2021-07-19 09:55:21
【问题描述】：

我知道这将是非常基本的，因为我可以理解这应该是多么简单 - 但我已经把自己搞砸了。

我只是想制作一个搜索栏功能。这是输入 -

<input class="form-control me-2 header__searchbar comic__search" type="search" placeholder="Search" aria-label="Search" style="width: 15rem; margin-left: 2rem;">

这是代码（到目前为止），但我无法让它返回值。

var searchbar = $(".comic__search");
var searchBarVal = ""

$("body").on("keyup", searchbar, function() {
  searchBarVal = searchbar.value;
  console.log(searchbar.value);
})

谢谢大家

【问题讨论】：

嗨@RoryMcCrossan - 感谢您的回答，尽管我现在更加困惑。事件处理程序按原样正确触发，只是没有返回 console.log 中的值（我知道我目前没有返回任何内容，实际上只是试图让值正常工作）
我在下面为您添加了一个答案，概述了问题以及如何解决它。
谢谢@RoryMcCrossan，非常感谢。

标签： javascript jquery search

【解决方案1】：

这里有两个不同的问题。

首先，您不能通过在on() 的第二个参数中提供一个 jQuery 对象来添加委托事件处理程序，因此该事件没有被正确绑定（它将适用于 DOM 中的 .comic__search 元素，当事件是绑定的，但不是稍后动态创建的，这是委托处理程序的重点）。将searchbar 改为字符串。

其次jQuery的方法是val()，而不是value。

var searchBarVal = "";

$("body").on("keyup", '.comic__search', function() {
  searchBarVal = $(this).val();
})

$('button').on('click', () => console.log(searchBarVal));

input {
  width: 15rem;
  margin-left: 2rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control me-2 header__searchbar comic__search" type="search" placeholder="Search" aria-label="Search" />

<button>Check value</button>

最后，请注意，您并没有在此处“返回”任何内容，您只是在更高范围内更新变量。

【讨论】：

【解决方案2】：

只需将.value 替换为.val()，因为searchbar 是jQuery 对象。

var searchbar = $(".comic__search");
var searchBarVal = "";

$("body").on("keyup", searchbar, function() {
  searchBarVal = searchbar.val();
  console.log(searchbar.val());
});

【讨论】：

【解决方案3】：

在您的示例中，searchbar 是一个 jquery 对象，要访问 jquery 对象中的 html 输入元素的值，您必须调用函数 val()：

var searchbar = $(".comic__search");
var searchBarVal = "";

$("body").on("keyup", function() {
  searchBarVal = searchbar.val();
  console.log(searchbar.val());
})

或者直接通过jquery wrapper访问html元素：

var searchbar = $(".comic__search");
var searchBarVal = "";

$("body").on("keyup", function() {
  searchBarVal = searchbar.get(0).value;
  console.log(searchbar.get(0).value);
})

可选地，您也可以直接访问该对象而无需任何 jquery：

var searchbar = document.querySelector(".comic__search");
var searchBarVal = "";

btn.addEventListener('keyup', function() {
  searchBarVal = searchbar.value;
  console.log(searchbar.value);
})

【讨论】：