zoukankan      html  css  js  c++  java
  • button元素的id与onclick的函数名字相同 导致方法失效的问题

    需求需要在原先页面添加一个按钮,触发一个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的事件绑定

     

    踩过的坑总结下,共勉

  • 相关阅读:
    递归遍历多维数组(树数据结构)的超级简单方式,并且可以递归超过200层,摘自<<PHP精粹:编写高效PHP代码>>
    http协议传输二进制数据以及对输入流(php://input)和http请求的理解
    一个非常简单的RPC服务
    php://input 打开的数据流只能读取一次,即读取一次之后读取的值为空
    soap的简单实现(PHP)
    使用PHP的curl扩展实现跨域post请求,以及file_get_contents()百度短网址例子
    jquery选取iframe
    算法之棋盘覆盖
    词法分析之实验报告
    简单的词法分析小程序
  • 原文地址:https://www.cnblogs.com/chywx/p/10287110.html
Copyright © 2011-2022 走看看