行内onclick使用遇坑--------作用域与传入字符串
问题一:行内onclick触发的函数放在$(funtion(){})内报错,错误代码如下:
<input type="button" value="确定" onclick="say()">
<script>
$(function(){
function say(){
alert(123);
}
})
</script>
运行之后报错:say is not defined
$(function{})的作用类似于window.onload,都是网页加载完成在执行相应的代码。删去$(function(){})之后程序运行正常,看来$(function(){})本身也是一个函数(这么明显之前居然没注意到),它形成了一个函数作用域,将say()这个函数变成了一个局部变量,$(function(){})外面无法访问。
解决方法:
1.删去$(function(){}),如果将<script>写在最下面,$(function(){})一般可以不用写。
2.如果必学写$(function(){}),将function say(){}改写为window.say = function(){},将say()函数变为全局的。
问题2:行内onclick传入动态字符串,错误代码如下:
<script>
var str = "asd";
$("<input type='button' value='确定' onclick='say("+str+")'>").appendTo($('body'));
function say(str){
console.log(str);
}
</script>
想让点击按钮时,输出的内容随str变化,但是报错asd is not defined
看起来 asd 被当成了变量,于是代码稍作修改:$("<input type='button' value='确定' onclick='say(\'"+str+"\')'>").appendTo($('body')); 给str加了一个单引号,运行之后又报错:Unexpected token }
查看浏览器控制台发现,这段代码被解析成了这样:<input type="button" value="确定" onclick="say(" asd')'="">; 询问了大神之后,将str加的单引号改为双引号,程序果然正常运行。经过思考得出结论,在保证js代码单双引号配对的同时,也要保证解析到html中的正确性,即标签中也是区分单双引号的。虽然标签中写成这样<input onclick="say('asd')">(正确写法); 但是被解析到浏览器中查看,都变成了双引号<input onclick="say("asd")">;一度影响了我的判断。。。
解决方法:
1.str外围改为双引号即$("<input type='button' value='确定' onclick='say(\'"+str+"\')'>").appendTo($('body'));
2.去掉say()函数的单引号,改为$("<input type='button' value='确定' onclick=say(\'"+str+"\')>").appendTo($('body')); 这样写浏览器会帮你加一个双引号,而且say()括号中的单双引号被正确解析。
最新文章
- html 上传预览图片
- JDBC小工具--TxQueryRunner及其单元测试
- Ace 动画应用实例 ------启动欢迎界面
- jquery设置和获得checkbox选中问题
- 第三章—Windows程序
- Bzoj 2346: [Baltic 2011]Lamp dijkstra,堆
- Entity Framework with MySQL 学习笔记一(继承)
- hunnu11543:小明的烦恼——分糖果
- 从插上网线到web页面请求,究竟发生了哪些过程?(计算机网络篇)
- Java学习记录:文件的输入输出流
- ubuntu重启、关机命令
- EntityFramework Reverse POCO Code First 反向生成器
- C/S和B/S 《JavaWeb开发王者归来》学习笔记
- Servlet基本_セッション属性
- 微信为啥不能直接下载.apk安装包
- 【读书笔记】SpringBoot读书笔记
- hammer使用: 代码:捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果
- Windows下Git使用报错:warning:LF will be replaced by CRLF in &#215;&#215;&#215;&#215;.&#215;&#215;
- 在SQL Server里如何进行数据页级别的恢复
- 堆管理之malloc和free分析
热门文章
- Servlet和JAVA BEAN 分析探讨
- hdu 4666 Hyperspace(多维度最远曼哈顿距离)
- wdcp系统升级mysql5.7.11
- POJ 2446 Chessboard (二分图匹配)
- LeetCode Contains Duplicate (判断重复元素)
- 流媒体相关知识介绍 及其 RTP 应用
- 30种oracle常见的等待事件说明
- ch03-文字版面的设计
- (原创)LAMP教程4-用VirtualBox安装64位的centos6.4
- 《Python 学习手册4th》 第十二章 if测试和语法规则