单击按钮时输入框值显示为空

Question

我正在尝试弹出输入框值，但它显示的是一个空白值。为什么？这是jsfiddle。

null

$(document).ready(function() {

  var name = $("#name").val();
  $('#showName').click(function() {
    alert(name);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" placeholder="First Name">
   
<button type="button" id="showName">Show name</button>

null

Answer 1

将var name=$（“#name”）.val（）；移动到click函数中。

$('#showName').click(function() {
  var name = $("#name").val();
  alert(name);
});

以下示例

null

$(document).ready(function() {

  $('#showName').click(function() {
    var name = $("#name").val();
    alert(name);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" placeholder="First Name">
<br>
<button type="button" id="showName">Show name</button>

Answer 2

当您在document.ready()中初始化var name时，name变量在加载页面时给出一个输入值，因此name的值等于nothing（空字符串）。因此您必须更改当单击按钮时输入值读取的代码。

$(document).ready(function() {
    $('#showName').click(function() {
        var name = $("#name").val();
        alert(name);
    });
});