Question

我已在jsfiddle上运行此代码，但我无法在浏览器上本地运行它。也许有人能发现我做得不对劲的事情？提前谢谢！

<html>
 <head>
   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
   <script type="text/javascript">
      $('.main input').click(function() {
      var value = $(this).val();
      var input = $('#key_select');
      input.val(value);
      return false;
      });
   </script>
 </head>
 <body>
   <input id="key_select" type="text" name="keyword" disabled/>

   <div class="main">
     <input type="button" name="honda" value="honda" />
     <input type="button" name="mercedes" value="mercedes" />
   </div>
 </body>
</html>

Answer 1

将代码放在document ready处理程序

中

<script type="text/javascript">
  $(function(){
      $('.main input').click(function() {
      var value = $(this).val();
      var input = $('#key_select');
      input.val(value);
      return false;
      });
  });
</script>

您的问题是您的逻辑正在执行页面上存在html元素，因此它什么都不做。

将代码置于文档就绪可以解决此问题，因为在构造DOM元素树时执行此处理程序。

虽然JavaScript在呈现页面时提供了用于执行代码的加载事件，但在完全接收到所有资产（如图像）之前，不会触发此事件。在大多数情况下，只要完全构造DOM层次结构，就可以运行脚本。传递给.ready（）的处理程序保证在DOM准备好后执行，因此这通常是附加所有其他事件处理程序并运行其他jQuery代码的最佳位置。使用依赖于CSS样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要。

如果代码依赖于加载的资源（例如，如果需要图像的尺寸），则应将代码放在load事件的处理程序中。

Answer 2

您忘记了文档准备就绪，当您尝试获取该元素时，该元素尚未呈现，因此您必须等待文档准备就绪，或者将脚本移动到元素下方，以便它们在脚本运行时可用。

<html>
 <head>
   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
   <script type="text/javascript">
      $(function() {
          $('.main input').click(function() {
              var value = $(this).val();
              var input = $('#key_select');
              input.val(value);
              return false;
          });
      });
   </script>
 </head>
 <body>
   <input id="key_select" type="text" name="keyword" disabled/>

   <div class="main">
     <input type="button" name="honda" value="honda" />
     <input type="button" name="mercedes" value="mercedes" />
   </div>
 </body>
</html>

jsFiddle在左侧下拉列表中选择时自动添加DOM就绪处理程序

Jquery在我的浏览器上不起作用（localhost）

2 个答案: