需求需要在原先页面添加一个按钮，触发一个function，如此简单的操作，却无意间发现了一个问题。(还是对html了解的太少)

先看下在菜鸟教程的示例(错误代码)

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

    function dianji(){

        $("input[name='city']:checked").each(function(){

            alert($(this).val());

        })

    }

</script>

</head>

<body>

    <form>

        <input type='button' id='dianji' onclick='dianji()' value='获取选中的城市'/><br />

        <input type='checkbox' name='city' value='北京'/>北京 <br />

        <input type='checkbox' name='city' value='上海'/>上海 <br />

        <input type='checkbox' name='city' value='天津'/>天津 <br />

        <input type='checkbox' name='city' value='重庆'/>重庆 <br />

    </form>

</body>

</html>

这个时候点击会出现Uncaught TypeError: dianji is not a function

为什么会这样呢？一看没啥毛病啊，function是绝对定义的。

之后可以将框中的代码一出form，变成如下代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

</script>

<script>

    function dianji(){

        $("input[name='city']:checked").each(function(){

            alert($(this).val());

        })

    }

</script>

</head>

<body>

    <input type='button' id='dianji' onclick='dianji()' value='获取选中的城市'/><br />

    <form>

        <input type='checkbox' name='city' value='北京'/>北京 <br />

        <input type='checkbox' name='city' value='上海'/>上海 <br />

        <input type='checkbox' name='city' value='天津'/>天津 <br />

        <input type='checkbox' name='city' value='重庆'/>重庆 <br />

    </form>

</body>

</html>

这个时候就正确了，可见是form的问题，原因

form中的input属性的值已经作为当前form的属性了，由于作用域问题，onclick访问的是form的dianji属性而不是外部的函数。

【dianji()会默认传递一个隐性参数this，此时的this代表的是form表单对象，会优先调用表单的属性，即dianji(this)，而不是调用window对象的dianji()方法】

解决方法：

  • 修改id名不要与函数名相同
  • onclick="dianji()"改为onclick="window.dianji()"表明是window对象的属性
  • 使用jquery的事件绑定

踩过的坑总结下，共勉

button元素的id与onclick的函数名字相同 导致方法失效的问题的更多相关文章

  1. Jq_DOM元素方法跟JQuery 核心函数跟JQuery 事件方法

    JQuery DOM 元素 函数                            描述 .get()                           从队列中删除所有未运行的项目. .ind ...

  2. html元素中id和name的区别

    可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而Nam ...

  3. HTML元素的ID和Name属性的区别

    HTML元素的ID和Name属性的区别今天突然兴致来了,想深究下这两属性的具体区别最classical的答案:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以 ...

  4. jquery appaend元素中id绑定事件失效问题

    1. 在jquery中append元素,如果该元素中有id值并且绑定事件,那么该id事件会失效,必须刷新一下才能使用. 2.解决办法: 举例:如果在一个<div class="titl ...

  5. 【winform】基于UserControl实现webBrower组件时html页面元素加载及onclick事件监听实现

    [背景]基于System.Windows.Forms.UserControl实现的webBrower组件在html内使用window.external调用winform事件失败. [解决思路]借助wi ...

  6. html5--3.16 button元素

    html5--3.16 button元素 学习要点 掌握button元素的使用 button元素 用来建立一个按钮从功能上来说,与input元素建立的按钮相同 button元素是双标签,其内部可以配置 ...

  7. <a href="javascript:void(0);" id='test' onclick="javascript:alert('即将上线，敬请期待！');"><em class="rmwd"></em>征稿平台</a>

    <a href="javascript:void(0);" id='test' onclick="javascript:alert('即将上线,敬请期待!');&q ...

  8. 为什么要在<button>元素中添加type属性

    在HTML中<button> 标签定义一个按钮. <button type="button">Click Me!</button> 在 butt ...

  9. 滚动到指定元素的id处+当元素出现在浏览器显示区域就会自动加载

    //滚动到指定元素的id处 如:$("#Exam82") function Jump() { var scroll_offset = $("#Exam82"). ...

随机推荐

  1. js生成接口请求参数签名加密

    js生成接口请求参数签名加密 定义规则:将所有参数字段按首字母排序, 拼接成key1 = value1 & key2 = value2的格式,再在末尾拼接上key = appSecret, 再 ...

  2. Linux/Unix 下自制番茄钟

    习惯使用番茄工作法,在Linux上工作时也需要一个番茄钟. 安装一个Linux下番茄钟工作软件? 其实根本没必要,我们可以用Linux下经典的at命令实现一个简单的番茄钟. 安装AT 一般Linux基 ...

  3. 【AtCoder】AGC005 F - Many Easy Problems 排列组合+NTT

    [题目]F - Many Easy Problems [题意]给定n个点的树,定义S为大小为k的点集,则f(S)为最小的包含点集S的连通块大小,求k=1~n时的所有点集f(S)的和取模92484403 ...

  4. sql 通过分数字段倒排获取名次的方法

    row_number() over(order by sort desc) 应用场景: 比如学员成绩表中有userid,username,sorce登字段,需要取出学员成绩的名次:表中没有名次字段,只 ...

  5. win7.wifi热点

    使用本地连接上网,将网卡设为wifi热点 cmd 管理员身份运行 netsh wlan set hostednetwork mode=allow ssid=4Gtest key=12345678 网络 ...

  6. 假·最大子段和 (sdutoj 4359 首尾相连)(思维)

    题目链接:http://acm.sdut.edu.cn/onlinejudge2/index.php/Home/Contest/contestproblem/cid/2736/pid/4359 具体思 ...

  7. ubuntun16.04+cuda9.0+cudnn7+anaconda3+pytorch+anaconda3下py2安装pytorch

    一.电脑配置 说明: 电脑配置: LEGION笔记本CPU Inter Core i7 8代GPU NVIDIA GeForce GTX1060Windows10 所需的环境: Anaconda3(6 ...

  8. VMware 增加硬盘ubuntu

    http://blog.csdn.net/Timsley/article/details/50742755

  9. Python time()方法

    from:http://www.runoob.com/python/att-time-time.html 描述 Python time time() 返回当前时间的时间戳(1970纪元后经过的浮点秒数 ...

  10. java 压缩与解压

    最近复习到IO,想找个案例做一做,恰好下载了许多图片压缩包,查看图片很不方便,所以打算用IO把图片都解压到同一个文件夹下.然后集中打包. 本例使用jdk自带的ZipInputStream和ZipOut ...