Question

HTML：

<div id="Background">
    <input id="search-Bar" type="text"> 
    <button id="SearchButton">Search</button>
</div>

var name = $("#search-Bar").val();
$("#SearchButton").on("click", function() {
    console.log(name);
});

我正在尝试使用.val（）获取输入的值但是当我控制台日志时每次都变成空白，有人可以告诉我如何解决这个问题吗？

Answer 1

$("#SearchButton").on("click", function() {
  var name = $("#search-Bar").val(); //this should be here

  console.log(name);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Background">
  <input id="search-Bar" type="text">
  <button id="SearchButton"> Search </button>

Answer 2

name变量在脚本加载时仅设置为，当它实际为空且保持此状态时。

在函数体内声明它以获得每个函数调用的新的实际值。

$("#SearchButton").on("click", function() { var name = $("#search-Bar").val(); console.log(name); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="Background"></div> <input id="search-Bar" type="text"> <button id="SearchButton"> Search </button>

Answer 3

您需要使用以下内容获取值：$('#search-Bar').val()

＆＃13;

var name = $("#search-Bar").val();
$("#SearchButton").on("click", function(){
    console.log($('#search-Bar').val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Background">
<input id="search-Bar" type="text"> 
<button id="SearchButton"> Search </button>

＆＃13;

Answer 4

试试这个，

＆＃13;

$("#SearchButton").on("click", function(){
var name = $("#search-Bar").val();
    console.log(name);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Background">
    <input id="search-Bar" type="text"> 
<button id="SearchButton"> Search </button>

＆＃13;

您正在做的是在事件调用函数之外分配名称变量，这不会改变值。

希望这会有所帮助。

jquery无法记录输入值

4 个答案: