需求需要在原先页面添加一个按钮，触发一个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. SharePoint 项目的死法(二)

    说实话, 做SharePoint项目或者任何信息化项目并不是个容易的事情, 但成功的IT项目对于一个企业来说也许意味着很多, 从我的观察来看, 大部分的成功的信息化项目给企业所带来的回报都远远超过其所 ...

  2. 20145226夏艺华 《Java程序设计》第5周学习总结

    教材学习内容总结 第八章 异常处理 语法与继承架构 使用 try.catch Java中所有信息都会被打包为对象,如果愿意,可以尝试(try)捕捉(catch)代表错误的对象后做一些处理 try{ . ...

  3. Tomcat与Spring中的事件机制详解

    最近在看tomcat源码,源码中出现了大量事件消息,可以说整个tomcat的启动流程都可以通过事件派发机制串起来,研究透了tomcat的各种事件消息,基本上对tomcat的启动流程也就有了一个整体的认 ...

  4. 天梯赛 L2-023. （模拟） 图着色问题

    题目链接 题目描述 图着色问题是一个著名的NP完全问题.给定无向图 G = (V, E),问可否用K种颜色为V中的每一个顶点分配一种颜色,使得不会有两个相邻顶点具有同一种颜色? 但本题并不是要你解决这 ...

  5. Linux/Unix系统编程手册 第一章：历史和标准

    Unix的开发不受控于某一个厂商或者组织,是由诸多商业和非商业团体共同贡献进行演化的.这导致两个结果:一是Unix集多种特性于一身,二是由于参与者众多,随着时间推移,Unix实现方式逐渐趋于分裂. 由 ...

  6. 20165230 《Java程序设计》实验四 Android程序设计实验报告

    20165230 <Java程序设计>实验四 Android程序设计实验报告 一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:田坤烨 学号:20165230 成绩: 指导 ...

  7. Explorer : 发布一个key-value存储系统，带有客户端和服务器端

    Explorer 一个key-value存储系统,带有客户端和服务器端.使用非常方便. 使用B+树作为存储引擎,客户端和服务器端使用TCP协议进行通信. 代码采用C++实现,底层将客户端和服务器通信封 ...

  8. linux设备驱动之USB主机控制器驱动分析 【转】

    转自:http://blog.chinaunix.net/uid-20543183-id-1930831.html   ---------------------------------------- ...

  9. C#之WinForm基础 新建一个不可编辑的comboBox

    慈心积善融学习,技术愿为有情学.善心速造多好事,前人栽树后乘凉.我今于此写经验,愿见文者得启发. 1.拉控件 2.添加可选数据 3.改变基本样式 4.效果图 C#优秀,值得学习.Winform,WPF ...

  10. jQuery插件之ajaxFileUpload(异步上传图片并实时显示，并解决onchange后ajaxFileUpload失效问题)

    参考学习: 第一篇:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 第二篇:http://www.jb51.net/a ...