需求需要在原先页面添加一个按钮，触发一个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. 【Swift】UIAlertController使用

    func clickButton1(){ 创建uialertcontroller var alertCtl : UIAlertController = UIAlertController(title: ...

  2. 【Linux 命令】 rsync 目录覆盖软链接,保持软链接不变并同步目录内容

    需求:有两个相同文件名的目录需要使用其中一个目录覆盖另外一个  问题: 被覆盖目录下存在软链接,但在源目录下软链接是一个目录 需要解决的方案: 要求将原目录里和被覆盖目录里冲突的目录文件复制到B的软链 ...

  3. oracle 修改属性

    alter table 表名 modify 字段名 类型; alter table 表名 modify 字段名 属性名; alter table TEST modify sbirthday not n ...

  4. ip_local_deliver && ip_local_deliver_finish

    当ip包收上来,查路由,发现是发往本地的数据包时,会调用ip_local_deliver函数: ip_local_deliver中对ip分片进行重组,经过LOCAL_IN钩子点,然后调用ip_loca ...

  5. 01-Coredump核心转存&&Linux程序地址分析【转】

    转自:http://www.itwendao.com/article/detail/404132.html 目录(?)[-] 一Core Dump核心转存 二Linux程序地址分析 一Core Dum ...

  6. js中图片获取src的正则

    链接: JavaScript 正则表达式:http://www.runoob.com/js/js-regexp.html js正则匹配出所有图片及图片地址src的方法:http://www.jb51. ...

  7. ios 个人开发者账户 给其他团队用坑爹的教程

    最新版本的 ios  支持 3个开发者证书 和 3个发布者证书  ,如果是多余3台电脑设备要真机调试,就比较麻烦 (手机支持100个设备) 解决方案就是: 在别人的电脑上要成功安装,须具备两个文件: ...

  8. centos7.2安装mysql5.7

    1.安装前工作 在安装前需要确定现在这个系统有没有 mysql,如果有那么必须卸载(在 centos7 自带的是 mariaDb 数据库,所以第一步是卸载数据库). 卸载系统自带的Mariadb: 查 ...

  9. Python学习笔记：lambda表达式

    lambda表达式:通常是在需要一个函数,但又不想去命名一个函数的时候使用,即匿名函数. 示例如下: add = lambda x,y : x+ y add(1,2) # 结果为3 1.应用在函数式编 ...

  10. 什么是 CLR（转）

    CLR(公用语言运行时)和Java虚拟机一样也是一个运行时环境,它负责资源管理(内存分配和垃圾收集),并保证应用和底层操作系统之间必要的分离..NET提供了一个运行时环境,叫做公用语言运行时(Comm ...