JS中onclick事件的一个坑_onclick的缺陷-CSDN博客

本文链接：https://blog.csdn.net/qq13398600329/article/details/72834149

今天碰见的这个问题并没有从源头上把它理解,只是通过一个变通的方式解决了这个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"));
        });
    });