需求需要在原先页面添加一个按钮，触发一个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. jquery bxslider幻灯片样式改造

    找了很多jquery的幻灯片,都觉得不是很好,最后发现bxslider兼容性最好,移动设备支持手动翻动. 但是官方提供的显示效果真的很难看,让人难以接受.最后只能自己DIY了. bxslider官方样 ...

  2. 【Hadoop】Win7上搭建Hadoop开发环境，方法一

    在Win7上,编写hadoop程序 操作系统:win7 hadoop版本:CDH3u6 1.下载安装JDK,以及Eclipse 2.新建JAVA Project 3.去cloudera网站下载hado ...

  3. Druid.io启用SQL支持

    Druid.io的SQL功能虽然在试验阶段,但是也支持了大部分的功能,而且还可以通过 Avatica JDBC查看请求的json,有助于我们理解Druid.io的语法.Druid.io有个比较坑的是, ...

  4. 个人集群部署hadoop 2.7 + hive 2.1

    环境:centos 6.6 x64 (学习用3节点) 软件:jdk 1.7 + hadoop 2.7.3 + hive 2.1.1 环境准备: 1.安装必要工具 yum -y install open ...

  5. Entity Framework(EF的Code First方法)

    EntityFramework,是Microsoft的一款ORM(Object-Relation-Mapping)框架.同其它ORM(如,NHibernate,Hibernate)一样, 一是为了使开 ...

  6. Hibernate5笔记2--单表的增删改查操作

    单表的增删改查操作: (1)定义获取Session和SessionFactory的工具类: package com.tongji.utils; import org.hibernate.Session ...

  7. 大规模实时流处理平台架构-zz

    随着不同网络质量下接入终端设备种类的增多,服务端转码已经成为视频点播和直播产品中必备的能力之一.直播产品讲究时效性,希望在一定的时间内让所有终端看到不同尺寸甚至是不同质量的视频,因此对转码的实时性要求 ...

  8. jquery记忆笔记

    1.javascript需要注意的一些问题: ①不要使用==比较,始终坚持使用===比较. false == 0; // true false === 0; // false ②NaN这个特殊的Num ...

  9. Centos 软连接和硬链接

    1.软链接: 建立软链接:ln -s /usr/local/node-v4.2.6-linux-x86/bin/node /usr/local/bin/node 解释:将/usr/local/node ...

  10. [How to] Phoenix 与 CDH5.4.2 HBase的整合

    1.简介 Phoenix将SQL带回到了NOSQL的世界,其在HBase之上做了一个layer,客户端通过SQL调用Phoenix,Phoenix在转化为HBase客户算API进行访问HBase,其很 ...