Jquery .value 在函數中返回 undefined 以返回輸入值

Question

我知道這將是非常基本的，因為我可以理解這應該是多么簡單 - 但我已經把自己搞砸了。

我只是想制作一個搜索欄功能。 這是輸入 -

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

謝謝大家

Answer 1

這里有兩個不同的問題。

首先，您不能通過在on()的第二個參數中提供 jQuery 對象來添加委托的事件處理程序，因此該事件沒有被正確綁定（當事件被綁.comic__search ，它適用於 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>

最后，請注意，您沒有在此處“返回”任何內容，您只是在更高范圍內更新變量。

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