行内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()括号中的单双引号被正确解析。

原文地址:https://www.cnblogs.com/tiger-fu/p/8310128.html

时间: 2024-11-12 11:22:24

行内onclick使用遇坑--------作用域与传入字符串的相关文章

行内 onclick事件 传参报错

js创建了一个a标签 row.id 为后台获取的数据   拼接到fun()函数中 actions.push('<a href="javascript:void(0)" class="btn" onclick=\'fun("'+row.id+'")\' ></a>'); 原文地址:https://www.cnblogs.com/webmc/p/12431005.html

jquery easyui+sparkline插件+jqplot插件实现数据表行内插入线形图

Jquery easyui : 实现前端数据包格式化输出,支持多种模块式定义,只需要添加相应的预设参数即可实现丰富的前端. 资料参考: http://www.jeasyui.com/ Jquery sparkline: 基于jQuery 的js插件,底层调用html5的canvas标签,并通过js动态实现在数据表行内画条形图或趋势图,操作简单,可实现不同类型的图形化,如线形图,饼状图,柱形图. 资料参考:http://omnipotent.net/jquery.sparkline/#s-docs

Easy UI实现行内编辑

最近跟着勇霞师姐做我们高校云平台的UI系统,各个系统界面的管理.UI的系统虽然很小,但是技术内容很新鲜,这篇博文就像大家介绍一下我新接触的EasyUI的知识:开启行内编辑. 效果图如下: 一.View页面 首先,引入easyui的js文件. [html] view plaincopy <link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/theme

行内js函数调用

<ul> <li onclick=abc(this);><a href="javascript:void(0);">12234588</a></li> <li onclick=abc(this);><a href="javascript:void(0);">12234588</a></li> <li onclick=abc(this);><a

JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件,遇到过一些坑,再此做个采坑记录吧!想要了解bootstrapTable的园友可以移步 JS组件系列——表格组件神器:bootstrap table. 本文原创地址:http://www.cnblogs.com/landeanfen/p/5821192.html 一.x-editable组件介绍 x

CSS-07 行内设置点击事件

在标签行内设置点击事件: <a href="#" onclick="obj.search()">查询</a> js代码: obj = { search : function(){ alert(123); } }; 原文地址:https://www.cnblogs.com/Helen-code/p/12151627.html

深入理解行内元素的布局

前言 总括: 本文通过实例讲解CSS中最大的难点之一,行内元素的布局,主要是挖掘line-height和vertical-align两个属性在布局方面的使用. 原文博客地址:深入理解行内元素的布局 知乎专栏&&简书专题:前端进击者(知乎)&&前端进击者(简书) 博主博客地址:Damonare的个人博客 白茶清欢无别事,我在等风,也在等你.? 正文 讲道理line-height和vertical-align 这对基是十分低调的,日常开发中碰到的很多莫名其妙的bug很大一部分都

微信小程序布局之行内元素和块级元素

元素按照显示方式主要可以分为块级元素和行内元素,元素的显示方式由display属性控制. 块级元素特点总结: 1.总是在新行上开始 2.宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好等于父级元素的内容区域宽度,即父元素的width.当设定新的宽度,如果宽度是100%,并且padding.margin不为零,导致块级元素宽度溢出父元素 3.盒子模型的高度默认由内容决定 4.盒子模型中高度.宽度和内外边距都是可控制

去除行内(inline/inline-block)元素之间的间距

先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { display: inline; background: #f00; } .inline-0f0 { display: inline; background: #0f0; } .inline-block-00f { display: inline-block; background: #00f; } .inline-bl