时间戳

首页 > 解决方案 > 为什么jquery无法访问html输入

jquery - 为什么jquery无法访问html输入

问题描述

我很震惊，这里发生了什么，只是这里缺少的东西很简单。为什么 html 输入变量不能在 jquery 中访问，我尝试使用 id 选择器，name 属性。这真的很奇怪。

$(document).ready(function(){
  var heading = $('#heading').val();
  var heading1 = $('#heading').text();
  var heading2 = $('input[name=heading]').val();
			$('#submit').click(function(){
      alert(heading);
      alert(heading1);
      alert(heading2);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<form action="">
<table>
<tr>
<th>
Heading
</th>
<td>
<input type="text" name="heading" id="heading">
<input type="submit" id="submit" name="submit">
</td>
</tr>
</table>
</form>
</body>
</html>

标签： jqueryhtml

解决方案

您需要在click事件中获取值，也text()不会获取输入值

$(document).ready(function() {
  $('#submit').click(function() {
    var heading = $('#heading').val();
    var heading1 = $('#heading').text(); //this will not get the value
    var heading2 = $('input[name=heading]').val(); // this will be the same as the heading var
    alert(heading);
    alert(heading1);
    alert(heading2);
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="">
  <table>
    <tr>
      <th>
        Heading
      </th>
      <td>
        <input type="text" name="heading" id="heading">
        <input type="submit" id="submit" name="submit">
      </td>
    </tr>
  </table>
</form>

推荐阅读