需求需要在原先页面添加一个按钮，触发一个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. Redis实战（七）Redis开发与运维

    Redis用途 1.缓存 Redis提供了键值过期时间设置, 并且也提供了灵活控制最大内存和内存溢出后的淘汰策略. 可以这么说, 一个合理的缓存设计能够为一个网站的稳定保驾护航. 2.排行榜系统 Re ...

  2. [译]Quartz.NET 框架 教程（中文版）2.2.x 之第六课 CronTrigger

    第六课 CronTrigger CronTrigger比SimpleTrigger更常用,当你需要一个基于日历般概念的作业调度器,而不是像SimpleTrigger那样精确指定间隔时间. 使用Simp ...

  3. [转载]asp.net mvc: why is Html.CheckBox generating an additional hidden input

    http://stackoverflow.com/questions/2697299/asp-net-mvc-why-is-html-checkbox-generating-an-additional ...

  4. 浅谈ASP.net处理XML数据

    XML是一种可扩展的标记语言,比之之前谈到的html有着很大的灵活性,虽然它只是与HTML仅有一个字母只差,但两者有很大的区别. XML也是标记语言,所以它每个标签必须要闭合,而HTML偶尔忘了闭合也 ...

  5. [转]天才计算机程序员 －－ fabrice bellard

    这位老兄就是用javascript写linux的那位,他的主页是:http://bellard.org/ 上面有他的几个作品,包括qemu,ffmpeg,tcc等. 这个世界从来不缺天才,只缺乏利用天 ...

  6. LintCode 407: Plus One

    LintCode 407: Plus One 题目描述 给定一个非负数,表示一个数字数组,在该数的基础上+1,返回一个新的数组. 该数字按照位权大小进行排列,位权最大的数在列表的最前面. 样例 给定 ...

  7. linux查询进程 kill进程

    查询进程 #ps aux #查看全部进程 #ps aux|grep firewall #查询与firewall相关的进程 kill进程一 kill进程pid为711进程: #pkill -9 711 ...

  8. Maven仓库国内镜像站

    感谢阿里巴巴,搭建并公开了Maven仓库的国内镜像站.话外:使用Maven的官方仓库真的是太slow了! 在<Maven Root>/conf/settings.xml中的<mirr ...

  9. java浅复制与深使用接口实现

    1．浅复制与深复制概念⑴浅复制(浅克隆)被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之,浅复制仅仅复制所考虑的对象,而不复制它所引用的对象. ⑵深复 ...

  10. Python生成器-博文读后感

    Windows 10家庭中文版,Python 3.6.4, 上午看过了一篇讲Python生成器的博文: 提高你的Python: 解释‘yield’和‘Generators(生成器)’(英文原文) 这篇 ...