Jquery在我的浏览器(localhost)上不起作用
Jquery does not work on my browser (localhost)
我让这段代码在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就绪处理程序
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 监视函数从服务返回不起作用,但作用域函数起作用
- 幻灯片滚动javascript不起作用
- 简单的javascript在Shopify中不起作用
- Recaptcha在IE7和IE8中不起作用
- Ember Data DS.Model's set函数不起作用
- JsFiddle上的鼠标事件不起作用
- 我的AngularJS表达式没有'不起作用
- 点击按钮输入不起作用
- 面向对象的Javascript代码在IE7中不起作用
- Javascript 切换在 localhost 上不起作用
- 为什么我的 http://localhost CORS 源不起作用
- navigator.cookieEnabled在localhost的IE9中不起作用
- angular js路由在localhost中不起作用
- 热模块更换已启用但不起作用http://localhost:3000/__webpack_hmr.
- 带有localhost或LAN服务器名称的IE8/IE9上的localStorage;不起作用
- 为什么document.all.item在localhost上不起作用
- $.post & AJAX 在服务器上不起作用,但在 localhost 中运行良好
- 当页面没有通过localhost/ (xampp服务器)打开时,Jquery加载不起作用
- Jquery在我的浏览器(localhost)上不起作用