JS中onclick事件的一个坑

来源:互联网 发布:js鼠标移动显示图片 编辑:程序博客网 时间:2024/06/05 02:33

今天碰见的这个问题并没有从源头上把它理解,只是通过一个变通的方式解决了这个bug…

<!-- 这是之前用到的a标签,在onclick事件中给方法传入了两个参数,并没有什么问题,以下称为A --><a href="javascript:void()" onclick="alertErrorMsg(${declareNumber},${aaa})">错误信息</a> <!-- 这是在修改之后的a标签,在onclick事件中传入一个参数,这时候会出现本文所说的问题,以下称为B--><a href="javascript:void()" onclick="alertErrorMsg(${declareNumber})">错误信息</a>
//这是修改后的方法,只需要传入一个参数function alertErrorMsg(declareNumber){        var url = "xxxxxxxxx";        var datas = {"declareNumber":declareNumber,_:new Date().getTime()};        $.ajax({            url:url,            data:datas,            type:"POST",            success:function(data){                var result = JSON.parse(data)["result"];                //layer.alert(typeof JSON.parse(data)["errorList"]);                var list = JSON.parse(data)["errorList"];                if(result == 1){//成功,则解析json并遍历.                    var str = "";                    for(var i=0;i<list.length;i++){                        str += (i+1)+"."+list[i]+"<br/>";                    }                    layer.open({                          type: 1,                          title:"错误信息",                          skin: 'layui-layer-rim', //加上边框                          area: ['600px', '400px'], //宽高                          content: str                        });                }else if(result == 2){//无数据                    layer.alert('没有错误信息!!!');                }else{//否则失败,提示系统异常                    layer.alert('系统异常!!!');                }            },            error:function(){                layer.alert('系统错误!!!');            }        });    }

A状态,我传入的是两个String类型,onclick没问题。
B状态,我传入的是一个String类型,onclick出现了错误提示:

//这里的fff30368a2774ee69ce41968a473a8ca 是传入的值Uncaught ReferenceError: fff30368a2774ee69ce41968a473a8ca is not defined

在这里我跟公司中的前端讨论了很长时间,也没有一个头绪.

最后只能将bug解决,然后记录下来。

解决方法:

<!-- 修改后的a标签 --><a href="javascript:void()" id="errorMsg" class="btn btn-danger">错误信息</a> <!-- 将后端传入的值放入一个隐藏域中 --><input type="hidden" id="declareNumber" value="${declareNumber }"/>
    //在dom元素加载完成后为指定的a标签绑定点击事件,然后调用上面的js方法与后台交互    //注意这里的解决方法是页面存在这个标签    $(function(){        $("#errorMsg").click(function(){            alertErrorMsg($("#declareNumber").val());        });    });    //如果需要点击的事件是由js创建则使用此方法,此方法需要在创建的标签中加上指定的class    $(function(){        //$("#sample-table")是取要点击的元素的父级标签或者祖级标签        //on("click",,".numberClass",function(){});则是查找id为sample-table的子孙标签中所有class为numberClass的标签,并为其绑定点击事件,在点击事件中出发alertErrorMsg()方法        $("#sample-table").on("click",".numberClass",function(){            alertErrorMsg($(this).attr("name"));        });    });


以上是这个问题的解决方法,但是如果有哪位知道原理的话,希望可以在评论中告知一下,万分感谢.
ps:这个问题出现的话,只是报js的错误,也就是浏览器中的console会打印错误,而不会进入到后台.

原创粉丝点击