行内onclick使用遇坑--------作用域与传入字符串

Posted Call_Me_Tiger_Fu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了行内onclick使用遇坑--------作用域与传入字符串相关的知识,希望对你有一定的参考价值。

 问题一:行内onclick触发的函数放在$(funtion(){})内报错,错误代码如下:

技术分享图片
1     <input type="button" value="确定" onclick="say()">
2     <script>
3         $(function(){
4             function say(){
5                 alert(123);
6             }
7         })
8     </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传入动态字符串,错误代码如下:

技术分享图片
1     <script>
2         var str = "asd";
3         $("<input type=‘button‘ value=‘确定‘ onclick=‘say("+str+")‘>").appendTo($(‘body‘));
4         function say(str){
5             console.log(str);
6         }
7     </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()括号中的单双引号被正确解析。

以上是关于行内onclick使用遇坑--------作用域与传入字符串的主要内容,如果未能解决你的问题,请参考以下文章

行内input标签onclick调用function执行ajax请求时遇到的问题

行内 onclick事件 传参报错

JS基础 作用域与闭包

九 作用域与闭包

作用域与闭包

表单隐藏域与display:none