我可以't使用“;jsbin”;代码localy,JQuery
I can't use "jsbin" code localy , JQuery
首先这是代码JS BIN
该代码用于在本地运行时使用一个按钮显示和隐藏DIV,它不起作用,这是我的html代码
<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.9.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
#login_Box_Div{
background:#999;
display:none;
}
</style>
<script>
$('#buttonLogin').click(function(){
$('#login_Box_Div').toggle();
});
</script>
</head>
<body>
<h3> <a href= "#">Pictio </a> <button id="buttonLogin">LogIn</button></h3>
<div id = "login_Box_Div">
<form name = "myform" >
<input type = "text" name = "username" placeholder = "Username" />
<input type = "password" name = "password" placeholder= "Password" />
<input type = "submit" id = "submitLogin" />
</form>
</div>
</body>
</html>
浏览器从上到下读取。当执行jQuery时,浏览器还没有找到元素,因此不会发生任何事情。将<script>
标记移动到页面底部(正文结束标记的正前方)。或者,您可以将jQuery代码封装在$(document).ready(
中,这会延迟执行,直到读取完整个页面。
替换此-
<script>
$('#buttonLogin').click(function(){
$('#login_Box_Div').toggle();
});
</script>
用这个-
<script>
$(document).ready(function() { // tells jquery that the document is ready to whirl
$('#buttonLogin').click(function(){
$('#login_Box_Div').toggle();
});
});
</script>
代码被放入一个文档就绪处理程序中,该处理程序本质上让jQuery知道所有元素都在文档中。一旦它们在文档中,就可以根据您编写的代码进行操作。如果没有这个处理程序,代码运行时不考虑元素是否存在,正如您所看到的,这可能会导致一些问题。
相关文章:
- 从桌面读取python文件时高亮显示代码
- 如何将函数包装在函数中以避免代码重复
- 通过单击表单中的按钮,在代码生成中使用javascript生成字母数字代码
- 货币代码为欧元-金额的格式不应包含小数
- Regex代码只允许一个空格
- 如何将屏幕分辨率乘以 80%,然后在代码中使用
- 从var向代码隐藏函数传递值
- 如何动态插入jquery代码
- 如何在php变量中嵌入JQuery代码
- 代码不会验证
- 如何从rails中的代码中删除新行( )
- Angularjs代码未在匿名函数中运行
- 如何做到这一点,使代码在不传递条件后执行函数
- 如何在读取XLS/XLSX本地文件时,使用IE的javascript代码启用未标记为安全的ActiveX控件
- 面向对象的Javascript代码在IE7中不起作用
- 将 jQuery 代码添加到 Index.aspx 页面
- 为什么忽略了eval()代码中的语法错误
- 元素在我的代码中不会.fadeTo.Don'I don’我不知道;s错误的JavaScript、JQuery、H
- 如何轻松地将服务器端变量从Java代码转移到客户端代码
- 我可以't使用“;jsbin”;代码localy,JQuery