Jquery .value return 在函数中未定义到 return 输入值

Question

我知道这将是非常基础的，因为我可以理解这应该是多么简单 - 但我把自己搞得一团糟。

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

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

这是代码（到目前为止），但我无法将其设为 return 值。

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

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

谢谢大家

Answer 1

这里有两个不同的问题。

首先，您不能通过在 on() 的第二个参数中提供 jQuery 对象来添加委托事件处理程序，因此事件没有被正确绑定（它将适用于 .comic__search 元素绑定事件时 DOM 中的元素，但不是稍后动态创建的元素，这是委托处理程序的要点）。将 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>

最后，请注意您在这里 'returning' 没有任何内容，您只是在更新更高范围内的变量。

Answer 2

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

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

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

Answer 3

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

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

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

或直接通过 jquery 包装器访问 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);
})

Jquery .value return 在函数中未定义到 return 输入值

Jquery .value returning undefined in function to return input value

javascript

search

jquery