button元素的id与onclick的函数名字相同导致方法失效的问题

最新推荐文章于 2021-06-23 14:02:04 发布

weixin_34203832

最新推荐文章于 2021-06-23 14:02:04 发布

阅读量224

点赞数 2

原文链接：http://www.cnblogs.com/chywx/p/10287110.html

版权

需求需要在原先页面添加一个按钮，触发一个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>