Jquery在我的浏览器(localhost)上不起作用

Jquery does not work on my browser (localhost)

本文关键字：不起作用 localhost 我的 浏览器 Jquery      更新时间：2023-09-26

我让这段代码在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>

将代码放入文档就绪处理程序

<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事件的处理程序中。

您忘记了文档准备好了，当您试图获取它时元素还没有呈现，所以您必须等待文档准备好，或者将脚本移到元素下面，以便在脚本运行时它们可用。

<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就绪处理程序

相关文章：